AndroidでAppleログイン

AndroidでAppleログインはハックです。 AppleはAndroidに対して公式のサポートを提供していないため、解決策は少しハックです。 Sign in with Apple Android上では、Appleが公式のサポートを提供していないため、解決策は少しハックです。

Androidは現在、OAuth2ウェブサイトを表示するためにChromeタブを使用しています。このアプローチには、以下の課題があります。

• 難しい設定
• バックエンドが必要

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.

2. クリック Identifiers.

   

   画面が以下のようになります。

   
   1. このフィールドが App IDs
   2. App IDが見つかります。

      注意

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

3. アプリの機能が有効になっていることを確認してください Sign in with Apple アプリの機能が有効になっていることを確認してください

   1. アプリをクリックしてください
   2. 機能が有効になっていることを確認してください Sign in with Apple 機能が有効になっていることを確認してください
   3. 有効になっていない場合は有効にします。

4. すべての識別子ナビゲーション ボタン All Identifiers

   

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

   

6. __CAPGO_KEEP_0__を作成

   1. __CAPGO_KEEP_0__のプラスボタンをクリック

      

   2. 選択 Servcice IDs そしてクリック Continue

      

   3. 説明と識別子を入力してクリック Continuie.

      

      注意

      この identifiers は機能に渡される clientId が渡される initialize 機能とバックエンドの ANDROID_SERVICE_ID に保存してください。

      注意

      サービスIDはアプリIDと一致する必要はありませんが、サービスIDを

      として設定することをお勧めします。 YOUR_APP_ID.service このアプリID me.wcaleniewolny.test.ionic.vue としてサービスIDを使用しています。 ee.forgr.io.ionic.service2 としてサービスIDを使用しています。

   4. 詳細を確認し、クリックしてください Register

      

   5. 新しく作成されたサービスにクリックしてください

      

   6. オプションを有効にしてください Sign in with Apple __CAPGO_KEEP_0__

      

   7. __CAPGO_KEEP_1__のSign in with Appleの設定 Sign In with Apple

      

   8. __CAPGO_KEEP_2__がApp IDに設定されていることを確認してください Primary App ID __CAPGO_KEEP_3__のApp IDを設定してください

      

   9. ホストするバックエンドのドメインを追加してください。

      

      注意

      このバックエンド は HTTPSで実行されている必要があります。ドメインについては、後で読むこのチュートリアルの次のセクションとバックエンドの設定を済ませてから戻ってきてください。チュートリアルの目的のために、このチュートリアルでは Return URLsをリターンURLと https://xyz.wcaleniewolny.me/login/callback ドメインとして使用します。次へ進みます。 xyz.wcaleniewolny.me データを確認し、

   10. 確認するドメインとリターンURLの設定 Done

       

   11. クリックしてください Continue

       

   12. クリックしてください Save

       

キーを作成しています

1. すべての識別子に戻る All Identifiers

   

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

   

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

   

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

   

   注意

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

5. 選択 Sign in with Apple 選択してクリック Configure

   

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

   

   注意

   このアプリIDは、前のステップで使用したIDと同じでなければなりません。

7. Continue

   

8. Register

   

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

   

   注意

   重要な注意事項: このIDを保存してください。バックエンドではこのIDが呼ばれます。 KEY_IDキーをダウンロードしてください。キーを誰にも共有しないでください。

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

    

チームIDを取得する

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

1. チームIDを取得するには このウェブサイト 下にスクロールしてください

2. 開発者アカウントでチームIDの場所を探してください Team ID

   

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

図では、バックエンドがアプリのリダイレクト設定のステップを実行します。 Redirect back to the appこのステップでは、アプリの設定に手動で変更が必要です。

1. 変更する AndroidManifest.xml

   1. Android Studioでファイルを開きます。ここでは AndroidStudio

      

   2. ここに MainActivity 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. __CAPGO_KEEP_0__ MainActivity

   1. Please open the MainActivity

      

   2. Add the following code:

      

      @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);
      }

      注意

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

注

あなたは新しい深いリンクをアプリに追加しました。深いリンクは以下のような形になります。 capgo-demo-app://path。変更することができます android:scheme そして、この深いリンクの android:host この深いリンクの見た目を変更するには 重要な注意: バックエンドの設定では、この深いリンクは BASE_REDIRECT_URL

バックエンドの設定

Androidの場合、バックエンドは必要ですが、バックエンドを設定すると、IOSにも影響します。以下に例のバックエンドが示されています。 ここ

以下の機能が提供されます。

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

注意

私は PM2 この例をホストするために使用しています。 例は ecosystem.config.js ここに このチュートリアルで述べたすべてのことを考慮した場合、セクションは次のようになります。

サービスID env アプリID

• ANDROID_SERVICE_ID コピー
• IOS_SERVICE_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"
}

= App ID

__CAPGO_KEEP_0__の使用方法は変わりません。iOSと同じです。詳しくはそのセクションを参照してください。 login ただし、 「HOWEVER」の initialize 「method」は少し変わります。

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

注意

「Note, that adding」 redirectUrl 「WILL」 「affect iOS !!!!!」

アプリを作成する

注意

既にApp IDが存在する場合は、このステップをスキップしてください。 Apple Login for IOSの設定済みの場合は、このステップを実行しないでください。

1. App IDが存在しない場合は、プラスボタンをクリックしてください。

   

2. 選択 App IDs 続けて

   

3. 種類を選択 App 続けて Continue

   

4. __CAPGO_KEEP_0__を入力してください

   

5. 有効 Sign with Apple 機能

   

6. クリック Continue

   

7. __CAPGO_KEEP_0__の詳細を確認してください Register