Apple Android에 로그인

Apple 안드로이드 로그인이 해킹되었습니다. Apple은 Android의 Sign in with Apple에 대한 공식 지원이 없으므로 솔루션이 약간 해킹되었습니다.

Android은(는) 현재 Chrome 탭을 사용하여 OAuth2 웹사이트를 표시합니다. 이 접근 방식에는 다음과 같은 과제가 있습니다.

• 어려운 구성
• 백엔드가 필요합니다

안드로이드에서의 흐름을 이해합니다.

다이어그램을 사용하여 Android의 흐름을 설명하겠습니다.

flowchart TD
    A("await SocialLogin.login()") -->|플러그인에서 처리|B(로그인 URL 생성)
    B --> |링크 전달| C(크롬 브라우저 열기)
    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. 이 웹사이트로 이동하여 아래로 스크롤합니다.

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에도 영향을 미칩니다. 백엔드 예시는 여기에서 제공됩니다.이 예에서는 다음을 제공합니다.

• 간단한 JSON 데이터베이스
• Apple의 서버에서 JWT을 요청하는 방법
• 간단한 JWT 확인

Note

이 예제를 호스팅하기 위해 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"
}

플러그인 사용하기

login 함수의 사용법은 변경되지 않으며 IOS와 동일합니다. 자세한 내용은 해당 섹션을 살펴보시기 바랍니다. 그러나 initialize 메서드는 약간 변경됩니다.

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

Danger

redirectUrl을 추가하면 WILL은 IOS에 영향을 미칩니다 !!!!!

앱 만들기

Note

이미 앱 ID가 있는 경우 이 단계를 건너뛸 수 있습니다. IOS용 Apple 로그인을 구성한 경우 이 단계를 따르지 마세요.

1. 아직 앱 ID가 없다면 더하기 버튼을 클릭하세요.

   

2. ‘앱 ID’를 선택하고 계속을 클릭하세요.

   

3. App 유형을 클릭하고 Continue을 클릭합니다.

   

4. 설명과 앱 ID를 입력하세요

   

5. Sign with Apple 기능을 활성화합니다.

   

6. Continue을 클릭하세요.

   

7. 내용을 확인하고 Register을 클릭하세요.