web-dev-qa-db-ja.com

Apple 3アプリケーションで「Ionic Idでサインイン）」を有効にする方法

私は既存のIonic 3アプリケーションを使用して、ユーザーがFacebookまたはGoogleアカウントでサインインできるようにします。このアプリケーションはASP.NET Core WebサイトおよびAPIと対話します。私の理解は、ある時点で= Appleをサポートするには、このようなアプリが必要です "Appleでサインイン"

FacebookとGoogleには、cordovaプラグイン（facebook4とgoogleplus）があり、次にOAuth/OpenID Connectを処理するサーバー側コードがあります。 「Appleでサインイン」用のCordovaプラグインが見つかりません。私は これのapi/web側を実装する方法に関する記事 を見つけましたが、Ionic側ではあまりわかりません。 ionicベースのiOSアプリですか？プラグインは必要ありませんか（つまり、すべてJavaScriptまたはアプリ内ブラウザーで実行できます）？アプリ内ブラウザーはGoogleの認証ページによってブロックされており、どの認証でもより「ネイティブな」アプローチが推奨されているようです。

私はこれが新しいことを理解していますが、Appleがそれを要求し始めるなら、より多くの開発者がこの問題を抱えているように思われます。これがすぐに必要になることについて私は誤解していますか？

ioscordovaionic-frameworkcordova-plugins
10
Daniel

このプラグインは動作するようです： cordova-plugin-Apple-login

このプラグインはiOSを開きますApple sigin in。ユーザーが認証されると、userIDとauthorizationCodeを含む応答が返されます。authorizationCodeをバックエンドに送信してユーザーを確認できます。

このプラグインにはionic-native-wrapperがないため、プラグインを使用するには以下を追加する必要があります。

declare var SignInWithApple: any;
2
Xynzzg

これを使用できますIonic wrapper： https://www.npmjs.com/package/@ionic-native/sign-in-with-Apple

プラグインとラッパーをインストールします。

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

インポート：

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

使用例（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