ios - 使用 Angular 登录 Apple 实施

问题描述

我正在尝试在 Angular 网站中实现 Sign in with Apple。实施流程从添加开始

在 index.html 文件中。

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

这是 sign-in-container.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>

/**
     * On Apple button click
     */
    onSocialAppleClick() {
        console.log("inside social app")
        const appleParams = {
            clientId : '////////',
            redirectURI : 'https://ppl-dev--fe--phx2.appspot.com/ajax/redirect',
            scope : 'name email',
            state : 'signin',
            usePopup : true
        };
        this.appleLoginService.signIn();
    }

苹果登录.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));
        })
    }

}

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

并询问appleid和密码。验证凭据后，Apple 服务器要求重定向到参数中提供的 redirectURI ( https://ppl-dev--fe--phx2.appspot.com/ajax/redirect )。但是当这被重定向时，我只能看到 json 数据在此处输入图像描述，而不是在用户登录的情况下打开网站。

标签： iosnode.jsangularapple-sign-in

ios - 使用 Angular 登录 Apple 实施

问题描述

解决方案

推荐阅读