How to enable “Sign in with Apple Id” in Ionic 3 application

问题

I have an existing Ionic 3 application that allows users to sign in with their Facebook or Google accounts. The app interacts with an ASP.NET Core website and api. My understanding is that at some point Apple will require such apps to support "Sign in with Apple"

With Facebook and Google, there are cordova plugins (facebook4 and googleplus), and then some server-side code to handle the OAuth/OpenID Connect. I am not finding any cordova plugins for "Sign in with Apple". I have found an article about how to implement the api/web side of this, however I'm less clear on the Ionic side. How do I to enable "Sign in with Apple" in the ionic based iOS app? Is a plugin not needed (ie it can all be done with javascript or in-app browser)? I know in-app-browser is blocked by Google's auth page and it seems like a more "native" approach is preferred for any auth.

I understand this is new, but it seems like more developers would have this issue if Apple is going to start requiring it. Am I misunderstanding something about this being required soon?

回答1:

This plugin seems to work: cordova-plugin-apple-login

This plugin opens the iOS Apple sigin in. After the user has been authenticated, you get a response containing an userID and authorizationCode. You can send the authorizationCode to your backend and verify the user.

Since there is no ionic-native-wrapper for this plugin, you will need to add the following to use the plugin:

declare var SignInWithApple: any;

回答2:

You could use this Ionic wrapper : https://www.npmjs.com/package/@ionic-native/sign-in-with-apple

Install the plugin and the wrapper :

ionic cordova plugin add cordova-plugin-sign-in-with-apple
npm i --save @ionic-native/sign-in-with-apple

Import :

import { SignInWithApple, AppleSignInResponse, AppleSignInErrorResponse, ASAuthorizationAppleIDRequest } from '@ionic-native/sign-in-with-apple';

An example of use (with firebase) :

  async loginWithApple(): Promise<void> {
    if (this.platform.is('cordova')) {
      try {
        const appleCredential: AppleSignInResponse = await SignInWithApple.signin({
          requestedScopes: [
            ASAuthorizationAppleIDRequest.ASAuthorizationScopeFullName,
            ASAuthorizationAppleIDRequest.ASAuthorizationScopeEmail
          ]
        });
        const credential = new firebase.auth.OAuthProvider('apple.com').credential(
          appleCredential.identityToken
        );
        this.afAuth.auth.signInWithCredential(credential)
          .then((res) => {
            console.log('Login successful', res);
          })
          .catch((error) => {
            console.log(error);
          });
      } catch (error) {
        console.log(error);
      }
    }
  }

来源：https://stackoverflow.com/questions/57825306/how-to-enable-sign-in-with-apple-id-in-ionic-3-application