web-dev-qa-db-fra.com

Comment activer "Se connecter avec Apple Id" dans l'application Ionic 3

J'ai une application Ionic 3 existante qui permet aux utilisateurs de se connecter avec leurs comptes Facebook ou Google. L'application interagit avec un site Web et une API ASP.NET Core. Je crois comprendre qu'à un moment donné = Apple nécessitera que ces applications prennent en charge "Connectez-vous avec Apple"

Avec Facebook et Google, il existe des plugins cordova (facebook4 et googleplus), puis du code côté serveur pour gérer OAuth/OpenID Connect. Je ne trouve aucun plugin cordova pour "Se connecter avec Apple". J'ai trouvé n article sur la façon d'implémenter le côté api/web de ceci , mais je suis moins clair du côté Ionic côté. Comment puis-je activer " Connectez-vous avec Apple "dans l'application iOS basée sur ionic? Un plugin n'est-il pas nécessaire (c'est-à-dire que tout peut être fait avec javascript ou un navigateur intégré à l'application)? bloqué par la page d'authentification de Google et il semble qu'une approche plus "native" soit préférée pour toute authentification.

Je comprends que c'est nouveau, mais il semble que plus de développeurs auraient ce problème si Apple va commencer à l'exiger. Suis-je en train de mal comprendre que quelque chose soit bientôt requis?

ioscordovaionic-frameworkcordova-plugins
10
Daniel

Ce plugin semble fonctionner: cordova-plugin-Apple-login

Ce plugin ouvre le sigin iOS Apple. Une fois l'utilisateur authentifié, vous obtenez une réponse contenant un ID utilisateur et un code d'autorisation. Vous pouvez envoyer le code d'autorisation à votre serveur et vérifier l'utilisateur.

Puisqu'il n'y a pas de wrapper natif ionique pour ce plugin, vous devrez ajouter ce qui suit pour utiliser le plugin:

declare var SignInWithApple: any;
2
Xynzzg

Vous pouvez utiliser ce Ionic: https://www.npmjs.com/package/@ionic-native/sign-in-with-Apple

Installez le plugin et le wrapper:

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

Importer:

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

Un exemple d'utilisation (avec 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);
      }
    }
  }
1
Cyril Blanchet