Apple Android にログイン

Apple Android でのログインはハッキングされています。 Apple は、Android 上の Sign in with Apple を正式にサポートしていないため、解決策は少しハック的です。

Android は現在、クロム タブを使用して OAuth2 Web サイトを表示しています。このアプローチには次のような課題があります。

• 構成が難しい
• バックエンドが必要です

Android での流れを理解する。

Android での流れを図を使って説明します。

flowchart TD
    A("await SocialLogin.login()") -->|プラグインで処理|B(ログイン URL を生成)
    B --> |リンクを渡します| C(Chromeブラウザを開く)
    C --> D(ユーザーがログインするまで待ちます)
    D --> |Apple はバックエンドにリダイレクトします|E(Apple から返されたデータを処理します)
    E --> F(アプリにリダイレクト)
    F --> G(JS に戻る)

課題とフローを理解したので、構成を開始しましょう。

サービスIDの作成

1. Apple 開発者ポータル にログインします。

2. [Identifiers] をクリックします。

   

   次のような画面が表示されるはずです。

   
   1. このフィールドに App IDs と表示されていることを確認します。
   2. アプリ ID が見つかることを確認します。 :::メモ IOS 用の Apple ログインを設定していない場合は、作成する必要があります。私の場合は、すでに作成済みです。使用するアプリ ID は me.wcaleniewolny.test.ionic.vue です。お持ちでない場合は、アプリの作成ステップ を使用して作成してください。 :::

3. Sign in with Apple 機能がアプリで有効になっていることを確認します

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

4. すべての「すべての識別子」に戻ります。

   

5. 「アプリ ID」をクリックし、「サービス ID」に移動します。

   

6. 新しい識別子の作成

   1. プラスボタンをクリックします

      

   2. 「サービス ID」を選択し、Continue をクリックします。

      

   3. 説明と識別子を入力し、Continuie をクリックします。

      

      :::メモ この identifiers は、バックエンドの initialize 関数と ANDROID_SERVICE_ID に渡す clientId になります。

      保存してください!!! :::

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

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

      

   5. 新しく作成したサービスをクリックします。

      

   6. Sign in with Apple オプションを有効にします。

      

   7. Sign In with Apple を構成する

      

   8. 「プライマリ アプリ ID」が前の手順で構成したアプリ ID に設定されていることを確認します。

      

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

      :::メモ このバックエンドは HTTPS で実行する必要があります**。 「戻り URL」については、このチュートリアルの次のセクションを読み、バックエンドを構成した後に戻ってくるとよいでしょう。このチュートリアルでは、戻り URL として https://xyz.wcaleniewolny.me/login/callback を使用し、ドメインとして xyz.wcaleniewolny.me を使用します。次へを押してください。 :::

   10. データを確認し、Done をクリックします。

       

   11. 「Continue」をクリックします。

       

   12. 「Save」をクリックします。

       

キーの作成

1. すべての「すべての識別子」に戻ります。

   

2. [Keys] をクリックします。

   

3. プラスアイコンをクリックします

   

4. キーに名前を付けます

   

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

5. Sign in with Apple を選択し、Configure をクリックします

   

6. プライマリ アプリ ID を選択し、Save を押します。

   

   :::メモ これは、前の手順の ID と同じアプリ ID である必要があります。 :::

7. [Continue] をクリックします。

   

8. [Register] をクリックします。

   

9. キー ID をコピーし、キーをダウンロードします。

   

   :::注意 重要: この ID を保存します。バックエンドでは KEY_ID という名前になります。キーをダウンロードします。このキーは決して共有しないでください。 :::

10. ダウンロードしたキーを見つけて、バックエンド フォルダーに保存します。

    

チーム ID の取得

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

1. この Web サイト にアクセスし、下にスクロールします

2. 「チーム ID」を見つけます。

   

アプリのリダイレクトの構成

図で見たように、バックエンドは「アプリにリダイレクトする」というステップを実行します。これには、アプリを手動で変更する必要があります。

1. AndroidManifest.xml を変更します

   1. ファイルを開きます。AndroidStudio を使用します。

      

   2. MainActivity を見つけて、次のインテント フィルターを追加します

      

      <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. MainActivity を開いてください。

      

   2. 次のコードを追加します。

      

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

      :::注意 この例では、ディープリンクが設定されていないことを前提としています。その場合はコードを調整してください :::

Note

新しいディープリンクをアプリに追加しました。ディープリンクは、capgo-demo-app://path のようになります。 android:scheme と android:host を変更して、このディープ リンクの外観を変更できます。 重要: バックエンド構成では、このディープリンクは BASE_REDIRECT_URL になります。

バックエンド構成

Android にはバックエンドが必要ですが、バックエンドの構成は IOS にも影響します。バックエンドの例は [ここ] (https://github.com/WcaleNieWolny/capgo-social-login-backend-demo/blob/main/index.ts) で提供されています。この例では次のことが提供されます。

• シンプルな JSON データベース
• Apple のサーバーから JWT をリクエストする方法
• 簡単な JWT 検証

Note

この例をホストするには PM2 を使用します。 ecosystem.config.js の例は [ここ] (https://github.com/WcaleNieWolny/capgo-social-login-backend-demo/blob/main/ecosystem.config.js.example) にあります。

このチュートリアルで述べたことをすべて考慮すると、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"
}

プラグインの使用

login 関数の使用法は変更されず、IOS と同じです。詳細については、そのセクションをご覧ください。 ただし、initialize メソッドは少し変更されています。

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

Danger

redirectUrl **** を追加すると IOS に影響することに注意してください。

アプリの作成

Note

すでにアプリ ID を持っている場合は、この手順をスキップできます。 IOS 用に Apple ログインを設定している場合は、この手順を実行しないでください。

1. アプリ ID をまだ持っていない場合は、プラス ボタンをクリックします。

   

2. 「App ID」を選択し、「続行」をクリックします。

   

3. 「App」と入力し、「Continue」をクリックします。

   

4. 説明とアプリ ID を入力します

   

5. Sign with Apple 機能を有効にする

   

6. [Continue] をクリックします。

   

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