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 を見つけることができることを確認してください。

      注記

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

3. アプリの設定を確認してください。 Sign in with Apple アプリを選択してください。

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

4. すべてに戻る All Identifiers

   

5. クリックしてください App Ids そして Services IDs

   

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

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

      

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

      

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

      

      注意

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

      サービスIDの詳細を入力する

      注意

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

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

      

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

      

   6. 新しく作成したサービスID Sign in with Apple 機能

      

   7. 設定を変更する Sign In with Apple

      

   8. 次のステップで設定したApp IDが Primary App ID 設定する必要があります

      

   9. バックエンドをホストするドメインを追加する

      

      注意

      このバックエンド HTTPSで 動いている必要があります。 Return URLs, このチュートリアルを続ける前に、後で読むようにしてください。このチュートリアルでは、後端を設定するまで待ってください。 https://xyz.wcaleniewolny.me/login/callback このチュートリアルで使用するために、 xyz.wcaleniewolny.me とを使用します。

   10. とを使用します。 Done

       

   11. ドメインとリターンURLの設定の確認 Continue

       

   12. サービス設定のボタンをクリックしてください。 Save

       

キーを作成中

1. すべてに戻る All Identifiers

   

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

   

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

   

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

   

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

   選択してください

5. とクリックしてください Sign in with Apple Keys section in Apple Developer Portal Configure

   

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

   

   注意

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

7. ボタンをクリック Continue

   

8. キー生成の登録ボタン Register

   

9. キーIDとダウンロードボタン画面

   

   注意

   重要: このIDを保存してください。バックエンドでは KEY_IDをダウンロードしてください。 このキーを誰にも共有しないでください。

10. ダウンロードしたキーをバックエンドフォルダに保存してください。

    

チームIDを取得する

Androidで使用するには Login with Apple が必要です。バックエンドで使用されます。 Team IDを取得する

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

バックエンド設定

A backend is required for Android, but configuring a backend will also impact IOS. An example backend is provided ここ

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

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

注意

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

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

• ANDROID_SERVICE_ID = サービスID
• IOS_SERVICE_ID = アプリ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 Loginの設定に追加する redirectUrl 追加すると iOSに影響します!!!!

アプリを作成する

注意

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

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

   

2. 選択 App IDs 続けてクリック

   

3. タイプをクリック App App のタイプを選択 Continue

   

4. アプリの説明とバンドル ID を入力

   

5. 機能 Sign with Apple Apple のサインイン機能を有効

   

6. capability Continue

   

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

   

Apple AndroidでAppleログインから続きます

Apple AndroidでAppleログインを使用している場合 Apple AndroidでAppleログインを使用しています Apple AndroidでAppleログインを使用している場合 Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, capgo/capacitor-passkey capgo/capacitor-passkeyの実装詳細について capgo/capacitor-native-biometric capgo/capacitor-native-biometricの実装詳細について 2要素認証 2要素認証の実装詳細について