Ios 使用Angular的Apple实现登录

我正在尝试在Angular网站上实现与苹果的登录。 实现流程从添加

在index.html文件中

<!-- Apple button -->
            <div class="row">
                <div class="col-md-12 d-flex justify-content-center align-self-center">
                    <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
                </div>
            </div>

然后使用scriptjs创建了一个名为apple-login-service.ts的服务

这是sign-in-container.html文件中apple按钮的代码

<!-- Apple button -->
            <div class="row">
                <div class="col-md-12 d-flex justify-content-center align-self-center">
                    <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign in"></div>
                </div>
            </div>

apple-login.service.ts

import { Injectable } from '@angular/core';
import { AppleParams } from '../models/server-models/apple-params-interface';

declare var require: any
@Injectable({
    providedIn: 'root'
})
export class AppleLoginService {

    private readonly appleScriptUrl: string = 'https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
    private ready: Promise<boolean> = new Promise(resolve => {
        if (typeof window !== 'undefined') {
            const script = require('scriptjs');
            script(this.appleScriptUrl, () => resolve(true));
        } else {
            resolve(false);
        }
    }
);
    /**
     * Error details
     */
    signIn() {
        console.log("inside sign in")
        throw new Error('Method not implemented.');
    }

    constructor() {
        this.ready.then(isReady => {
            if (isReady) {
                this.init();
            }
        });
    }
    /**
     * Call init method
     */
    private init(): void {
        console.log("inside init method")
        window['AppleID'].auth.init({
            clientId: 'com.pizzapizza.web',
            scope: 'name email',
            redirectURI: 'https://ppl-dev--fe--phx2.appspot.com/ajax/redirect',
            state: 'sign in'
        });
        window.addEventListener('AppleIDSignInOnSuccess', (event) => {
            console.log('Got a message: ' + JSON.stringify(event));
        })
    }

}

从'@angular/core'导入{Injectable}；
从“../models/server models/apple params interface”导入{AppleParams}；
declare-var-require:any
@注射的({
providedIn:'根'
})
导出类AppleLogins服务{
私有只读applescriptur:string='0https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js';
私有就绪：承诺=新承诺（解决=>{
如果（窗口类型！==“未定义”）{
const script=require（'scriptjs'）；
脚本（this.applescriptur，（）=>resolve（true））；
}否则{
决议（假）；
}
}
);
/**
*错误详细信息
*/
签名（）{
控制台日志（“内部登录”）
抛出新错误（'方法未实现'）；
}
构造函数（）{
这个.ready.then（isReady=>{
如果（isReady）{
this.init（）；
}
});
}
/**
*调用init方法
*/
private init（）：void{
log（“内部初始化方法”）
窗口['AppleID'].auth.init({
clientId:'com.pizza.web'，
范围：“名称电子邮件”，
重定向URI:'https://ppl-dev--fe--phx2.appspot.com/ajax/redirect',
声明：“登录”
});
window.addEventListener（'appleidsigninosuccess'，（事件）=>{
log（'得到消息：'+JSON.stringify（事件））；
})
}
}

当我从html页面点击apple按钮时，它会将我重定向到appleid.apple.com

并询问appleid和密码。验证凭据后，apple服务器要求重定向到参数中提供的重定向URI（）。

---

但是当这个被重定向时，我只能看到json数据，而不能在用户登录时打开网站。

苹果将直接向您的重定向URI发送POST请求，根据该请求的响应，您将能够将用户重定向回angular应用程序。据我所知，您正在收听来自该post请求的事件，但重定向URI没有向angular应用程序窗口发送事件，这就是为什么您只能看到json文件，苹果将直接向您的重定向URI发送post请求，根据该请求的响应，您将能够将用户重定向回angular应用程序。从我读到的内容来看，您正在侦听来自post请求的事件，但重定向URI没有向angular应用程序窗口发送事件，这就是为什么您只能看到json文件的原因