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がそれを要求し始めるなら、より多くの開発者がこの問題を抱えているように思われます。これがすぐに必要になることについて私は誤解していますか?

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