Apple ログイン

Android上のAppleログインはハックです。AppleはAndroidに対して公式のサポートを提供していないため、解決策は少しハックです。 Sign in with Apple Androidは現在、OAuth2ウェブサイトを表示するためにChromeタブを使用しています。このアプローチには、次のような課題があります:

難しい設定

• バックエンドが必要
• Androidのフローを理解すること

Androidのフローを理解すること

Androidで流れを説明するために、図を使用してください:

flowchart TD
    A("await SocialLogin.login()") -->|Handled in the plugin|B(Generate the login URL)
    B --> |Pass the link| C(Open the Chrome browser)
    C --> D(Wait for the user to login)
    D --> |Apple redirects to your backend|E(Handle the data returned from Apple)
    E --> F(Redirect back to the app)
    F --> G(Return to JS)

今、課題と流れについての認識ができたので、設定を始めましょう。

サービスIDを作成する

1. Apple Developer Portalにログインしてください。 Apple Developer Portalの「識別子」セクションをクリックしてください。.

2. 画面が次のようになっているはずです: Identifiers.

   

   このフィールドが次のようになっていることを確認してください。

   
   1. __CAPGO_KEEP_0__ App IDs
   2. App ID を見つけることができることを確認してください。

      注意

      IOS の Apple Login を設定していない場合は、1 つを作成する必要があります。私にはすでに 1 つが作成されています。使用する App ID は me.wcaleniewolny.test.ionic.vueが使用されます。1 つがなければ、 アプリを作成するステップ.

3. アプリの Sign in with Apple アプリを選択

   1. リストからアプリを選択
   2. 機能が有効になっていることを確認してください Sign in with Apple __CAPGO_KEEP_0__
   3. 有効になっていない場合は有効にする必要があります。

4. すべてに戻る All Identifiers

   

5. クリックしてください。 App Ids と移動して Services IDs

   

6. 新しい識別子を作成する

   1. プラスボタンをクリックしてください。

      

   2. 選択してください。 Servcice IDs クリックしてください。 Continue

      

   3. 説明と識別子を入力し、クリックしてください Continuie.

      

      注意

      これは identifiers これが clientId 関数に渡す initialize バックエンドで使用する ANDROID_SERVICE_ID 保存してください!!!

      注意

      注意

      サービスIDはApp IDと一致する必要はありませんが、サービスIDを YOUR_APP_ID.service に設定することをお勧めします。 me.wcaleniewolny.test.ionic.vue アプリIDとして ee.forgr.io.ionic.service2 を使用していますが、サービスIDとして

   4. を使用しています。 Register

      

   5. サービスIDの登録を確認する

      

   6. にクリックしてください。 Sign in with Apple 新しく作成したサービスIDを選択する

      

   7. AppleとAndroidの両方でサインイン機能を有効にするには、 Sign In with Apple

      

   8. 以下の設定を確認する Primary App ID App IDを設定する

      

   9. 次のステップで設定したApp IDを選択する

      

      注意

      注意 バックエンドはHTTPSで動作している必要があります。 HTTPSで動作している必要があります。 Return URLs,このチュートリアルの次のセクションを読み終わった後、バックエンドを設定した後、このページに戻ってください。 https://xyz.wcaleniewolny.me/login/callback このチュートリアルでは、以下のURLとドメインを使用します。 xyz.wcaleniewolny.me ドメインとリターンURLを確認し、次のボタンをクリックしてください。

   10. ドメインとリターンURLの設定を確認し、次のボタンをクリックしてください。 Done

       

   11. サービス設定の次のステップに進むには、以下のボタンをクリックしてください。 Continue

       

   12. キーを作成中 Save

       

targetLanguage

1. protectedTokens All Identifiers

   

2. クリックしてください Keys

   

3. プラスアイコンをクリックしてください

   

4. キー名を入力してください

   

   この名前は重要ではありません。何でも入力できます。

   選択してください

5. クリックしてください Sign in with Apple protectedTokens Configure

   

6. 主なApp IDを選択し、 Save

   

   注意

   このApp IDは、前のステップで指定したIDと同じでなければなりません。

7. Click on Continue

   

8. Click on Register

   

9. キーIDをコピーし、キーをダウンロードしてください。

   

   注意

   重要: __CAPGO_KEEP_0__を保存してください。バックエンドでは__CAPGO_KEEP_0__が呼ばれます。 KEY_ID__CAPGO_KEEP_0__をダウンロードしてください。__CAPGO_KEEP_0__を共有することは絶対に避けてください。

10. ダウンロードした__CAPGO_KEEP_0__ファイルを探してください。

    

__CAPGO_KEEP_0__ファイル

「チームIDを取得する」のセクション Login with Apple Androidで使用するには Team ID__CAPGO_KEEP_0__が必要です。バックエンドで使用されます。

1. このウェブサイトに移動してください このウェブサイト 下にスクロールしてください

2. 以下の場所を見つけてください Team ID

   

アプリのリダイレクト設定

図で示されているように、バックエンドはアプリにリダイレクトするための手動の変更が必要です Redirect back to the appアプリのリダイレクト設定

1. 以下のステップを実行してください AndroidManifest.xml

   1. ファイルを開いてください、以下のファイルを使用します AndroidStudio

      

   2. AppleとAndroidの MainActivity と以下のIntentフィルタを追加する

      

      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="capgo-demo-app" android:host="path" />
      </intent-filter>

2. を変更する MainActivity

   1. Android Studioで MainActivity

      

   2. codeをMainActivityに追加する

      

      @Override
      protected void onNewIntent(Intent intent) {
          String action = intent.getAction();
          Uri data = intent.getData();
      
          if (Intent.ACTION_VIEW.equals(action) && data != null) {
              PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
              if (pluginHandle == null) {
                  Log.i("Apple Login Intent", "SocialLogin login handle is null");
                  return;
              }
              Plugin plugin = pluginHandle.getInstance();
              if (!(plugin instanceof SocialLoginPlugin)) {
                  Log.i("Apple Login Intent", "SocialLogin plugin instance is not SocialLoginPlugin");
                  return;
              }
              ((SocialLoginPlugin) plugin).handleAppleLoginIntent(intent);
              return;
          }
          super.onNewIntent(intent);
      }

      AppleとAndroidの

      この例では、深いリンクが設定されていないことを前提としています。設定されている場合は、codeを調整してください。

注意

アプリに新しい深いリンクを追加しました。深いリンクは次のようになります。 capgo-demo-app://pathを変更してください。 android:scheme を変更してください。 android:host この深いリンクの表示を変更するには、を変更してください。 重要: バックエンド設定 BASE_REDIRECT_URL

バックエンド設定

items ここ

この例では、以下の機能が提供されます。

• シンプルなJSONデータベース
• AppleのサーバからJWTを要求する方法
• シンプルなJWT検証

注意

私は PM2 この例をホストするために使用します。例は ecosystem.config.js ここ このチュートリアルで述べたすべてのことを考慮した場合、以下の方法で実行します。

items env セクションの見た目は次のようになります。

• ANDROID_SERVICE_ID = Service ID
• IOS_SERVICE_ID = App ID

env: {
  PRIVATE_KEY_FILE: "AuthKey_U93M8LBQK3.p8",
  KEY_ID: "U93M8LBQK3",
  TEAM_ID: "UVTJ336J2D",
  ANDROID_SERVICE_ID: "ee.forgr.io.ionic.starter.service2",
  IOS_SERVICE_ID: "me.wcaleniewolny.test.ionic.vue",
  PORT: 3000,
  REDIRECT_URI: "https://xyz.wcaleniewolny.me/login/callback",
  BASE_REDIRECT_URL: "capgo-demo-app://path"
}

プラグインを使用する

この機能の使用方法は変わりません。iOSのセクションを参照してください。 login しかし ,メソッドは少し異なります。 initialize コピー

await SocialLogin.initialize({
  apple: {
    clientId: 'ee.forgr.io.ionic.starter.service2',
    redirectUrl: 'https://appleloginvps.wcaleniewolny.me/login/callback'
  }
})

危険

注意してください。Appleログインの設定に追加する redirectUrl 必須 iOSに影響します!!!!

アプリを作成する

注意

既存のApp IDがあれば、このステップをスキップしてください。 iOS用のAppleログインが設定済みの場合は、このステップに従わないでください。

1. App IDがなければ、プラスボタンをクリックしてください

   

2. 選択 App IDs __CAPGO_KEEP_0__

   

3. 種類をクリック App App ID の種類を選択 Continue

   

4. 説明と Bundle ID を入力

   

5. 機能 Sign with Apple Sign in with Apple の機能を有効

   

6. __CAPGO_KEEP_0__ Continue

   

7. 詳細を確認し、クリック Register

   

AndroidのAppleログインから続けて

Appleログインを使用している場合 Appleログインを使用して 認証とアカウントフローの計画に使用している場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login ネイティブ機能の@capgo/capacitor-social-login ネイティブ機能の@capgo/capacitor-social-login 実装詳細の@capgo/capacitor-social-login 実装詳細の@capgo/capacitor-social-login @capgo/capacitor-passkey Capgoの実装詳細については、@capgo/capacitor-passkeyを参照してください。 @capgo/capacitor-native-biometric Capgoの実装詳細については、@capgo/capacitor-native-biometricを参照してください。 2要素認証 2要素認証の実装詳細については、2要素認証を参照してください。