애플 로그인 (안드로이드)

애플 로그인은 안드로이드에서 약간의 해킹이 필요합니다. 애플은 안드로이드에 대한 공식 지원을 제공하지 않기 때문입니다. Sign in with Apple 안드로이드는 현재 Chrome 탭을 사용하여 OAuth2 웹사이트를 표시합니다. 이 접근 방식에는 다음과 같은 문제가 있습니다:

어려운 구성

• __CAPGO_KEEP_0__
• 백엔드가 필요합니다

안드로이드에서 흐름을 이해하는 방법

흐름을 설명하기 위해 다이어그램을 사용해 보겠습니다.

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. 애플 개발자 Portal로 로그인하세요 애플 개발자 Portal.

2. 애플 개발자 Portal의 식별자 섹션을 클릭하세요 Identifiers.

   

   이런 화면을 볼 수 있어야 합니다:

   
   1. 이 필드가 App IDs
   2. 앱 ID를 찾을 수 있어야 합니다.

      주의

      IOS에서 애플 로그인 설정이 안되어 있다면, 하나를 만들어야 합니다. 저는 이미 하나를 만들었습니다. 사용할 앱 ID는 me.wcaleniewolny.test.ionic.vue없다면, create app 단계를 통해 하나를 만들어 주세요..

3. 앱에 Sign in with Apple 능성이 활성화되어 있어야 합니다.

   1. 앱을 클릭하세요
   2. __CAPGO_KEEP_1__이 활성화되어 있는지 확인하세요. Sign in with Apple __CAPGO_KEEP_2__이 활성화되어 있는지 확인하세요.
   3. 활성화되지 않은 경우 활성화하세요.

4. 모두 보기로 돌아가기 All Identifiers

   

5. __CAPGO_KEEP_3__을 클릭하세요. App Ids __CAPGO_KEEP_4__으로 이동하세요. Services IDs

   

6. 새 식별자 만들기

   1. 플러스 버튼을 클릭하세요.

      

   2. 선택 Servcice IDs 및 클릭 Continue

      

   3. 설명과 식별자 입력 후 클릭 Continuie.

      

      주의

      이것 identifiers 이것이 clientId 함수에 전달할 initialize 것이 될 것입니다 ANDROID_SERVICE_ID 백엔드에 대해.

      잘 저장해주세요!!!

      주의

      서비스 ID는 앱 ID와 일치할 필요는 없지만, 서비스 ID를 YOUR_APP_ID.service __CAPGO_KEEP_0__ me.wcaleniewolny.test.ionic.vue 앱 ID는 ee.forgr.io.ionic.service2 서비스 ID는

   4. 세부 사항을 확인하고 Register

      

   5. 새로 생성된 서비스를 클릭하세요

      

   6. Enable the Sign in with Apple option

      

   7. Configure the Sign In with Apple

      

   8. 애플리케이션 ID가 이전 단계에서 설정된 Cloudflare App ID로 설정되어 있는지 확인하십시오. Primary App ID App ID를 설정하는 드롭다운

      

   9. 도메인 및 반환 URL 필드를 설정하십시오.

      

      __CAPGO_KEEP_0__

      HTTPS를 사용하는 백엔드가 실행 중이어야 합니다. 이에 대한 자세한 내용은 이 튜토리얼의 다음 섹션을 읽고 백엔드 설정을 완료한 후 다시 돌아와 보세요. 이 튜토리얼을 위해, 나는 를 반환 URL로 사용하고 를 도메인으로 사용할 것입니다. 다음을 클릭하세요. Return URLs데이터를 확인하고 https://xyz.wcaleniewolny.me/login/callback 버튼을 클릭하세요. xyz.wcaleniewolny.me 도메인 및 반환 URL 설정 확인

   10. 서비스 설정을 위해 Done

       

   11. 서비스 설정을 위해 Continue

       

   12. 서비스 설정을 위해 Save

       

키를 생성합니다.

1. 모두로 돌아가기 All Identifiers

   

2. 클릭하세요. Keys

   

3. 플러스 아이콘을 클릭하세요.

   

4. 키 이름을 입력하세요.

   

   주의

   이 이름은 중요하지 않습니다. 아무거나 넣으세요.

5. 선택 Sign in with Apple 및 클릭 Configure

   

6. 기본 App ID를 선택하고 Save

   

   주의

   이 App ID는 이전 단계에서 사용한 ID와 동일해야 합니다.

7. Click on Continue

   

8. Continue 버튼을 클릭하세요. Register

   

9. __CAPGO_KEEP_0__ ID를 복사하고 키를 다운로드하세요.

   

   주의

   중요: 이 ID를 저장하세요. 백엔드에서는 이 ID를 호출합니다. KEY_ID키를 다운로드하세요. 이 키를 절대 공유하지 마세요.

10. 다운로드 한 키 파일을 찾고 백엔드 폴더에 저장하세요.

    

팀 ID를 찾는 방법

In order to use Login with Apple on Android, you need to get the Team ID. It will be used in the backend.

1. Go to this website and scroll down

2. Find the Team ID

   

Configuring the app redirect

앱 리다이렉트 설정 Redirect back to the app뒤에 설명한 것처럼 백엔드에서 수행하는 단계가 있습니다. 이 단계는 앱의 수동 변경이 필요합니다.

1. 수정하기 AndroidManifest.xml

   1. 파일을 열어보세요. Android Studio에서 AndroidManifest.xml 파일을 사용할 것입니다. AndroidStudio

      

   2. 찾아보기 MainActivity Intent 필터 __CAPGO_KEEP_0__를 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. Android Studio에서 MainActivity.java 파일을 열어보세요. MainActivity

   1. MainActivity.java 파일을 열어보세요. 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);
      }

      주의

      예를 들어, 깊은 링크를 설정하지 않은 경우에 이 예제를 사용합니다. 깊은 링크를 설정한 경우에는 code를 조정해 주세요.

참고

앱에 새로운 깊은 링크를 추가했습니다. 깊은 링크는 다음과 같은 형식으로 보일 것입니다. capgo-demo-app://path이 깊은 링크를 수정하려면 android:scheme 이름 android:host URL 중요: 백엔드 설정에서 이 깊은 링크는 BASE_REDIRECT_URL

백엔드 설정

안드로이드에는 백엔드가 필요하지만 백엔드를 구성하면 IOS에도 영향을 미칩니다. 예를 들어, 다음 예제 백엔드가 제공됩니다. 여기

이 예제는 다음을 제공합니다.

• JSON 데이터베이스
• 애플 서버에서 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 그러나 그러나__, the initialize 메서드의 변경은 조금 다릅니다.

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

위험

주의, 추가로 redirectUrl WILL iOS에 영향을 줄 것입니다!!!!

앱을 만들기

주의

If you already have an App ID, you can skip this step. Don’t follow this step if you have configured Apple Login for IOS.

1. 이미 App ID가 있는 경우 이 단계를 건너뛸 수 있습니다. Apple Login for IOS를 구성한 경우 이 단계를 따르지 마십시오.

   

2. App ID가 아직 없는 경우 플러스 버튼을 클릭하세요. App IDs Add new identifier plus button

   

3. Select App 선택 Continue

   

4. 계속하기를 클릭하세요.

   

5. App ID 유형을 선택합니다. Sign with Apple 능력

   

6. 클릭 Continue

   

7. 세부 정보를 확인하고 클릭 Register