Android에서 Apple 로그인

이 플러그인의 설치 단계와 전체 markdown 가이드가 포함된 설정 프롬프트를 복사하세요.

Android에서 Apple 로그인을 구현하는 것은 까다롭습니다. Apple은 공식적으로 지원하지 않기 때문입니다. Sign in with Apple Android에서는 구현 방식이 다소 까다롭습니다.

현재 Android는 OAuth2 웹사이트를 표시하기 위해 Chrome Tabs를 사용합니다. 이 방식에는 다음과 같은 어려움이 있습니다:

복잡한 설정 과정
백엔드 서버 필요

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)

이제 문제점과 흐름을 파악했으니, 설정을 시작해 보겠습니다.

Service ID 생성하기

다음 사이트에 로그인하세요: Apple Developer Portal.
클릭하세요 Identifiers.

다음과 같은 화면이 나타납니다:
1. 이 필드에 다음 내용이 있는지 확인하세요: App IDs
2. App ID를 찾을 수 있는지 확인하세요.
  iOS용 Apple Login 설정이 되어 있지 않다면 새로 생성해야 합니다. 저는 이미 생성된 것이 있습니다. 사용할 App ID는 me.wcaleniewolny.test.ionic.vue입니다. 설정된 것이 없다면 앱 생성 단계 를 사용하여 생성해 주세요..
다음 사항을 확인하세요: Sign in with Apple 앱에 capability가 활성화되어 있습니다
1. 앱을 클릭하세요
2. 다음 사항을 확인하세요: Sign in with Apple capability가 활성화되어 있는지
3. 활성화되어 있지 않다면, 활성화하세요.
전체 목록으로 돌아가기 All Identifiers
클릭하세요 App Ids 로 이동하여 Services IDs
새로운 식별자 생성
1. 플러스 버튼 클릭
2. 선택 Servcice IDs 클릭하여 Continue
3. 설명과 식별자를 입력하고 클릭 Continuie.
  
  이 항목은 identifiers 다음이 됩니다 clientId 전달할 initialize 함수와 ANDROID_SERVICE_ID 백엔드용입니다.
  꼭 저장해 두세요!!!
  
  Service ID는 App ID와 일치할 필요는 없지만, Service ID를 YOUR_APP_ID.service 로 설정하는 것을 권장합니다. 참고로 저는 me.wcaleniewolny.test.ionic.vue 를 App ID로 사용하고 있지만, ee.forgr.io.ionic.service2 를 Service ID로 사용하고 있습니다.
4. 상세 내용을 확인한 후 Register
5. 새로 생성된 서비스를 클릭하세요
6. 다음 항목을 활성화하세요 Sign in with Apple 옵션
7. 다음 항목을 구성하세요 Sign In with Apple
8. 다음 항목을 확인하세요 Primary App ID 이전 단계에서 구성한 App ID로 설정되어 있는지
9. 백엔드를 호스팅할 도메인을 추가하세요.
  
  이 백엔드는 반드시 HTTPS 환경에서 실행되어야 합니다. 또한 Return URLs이 튜토리얼의 다음 섹션을 읽고 백엔드 설정을 마친 후에 다시 확인하는 것이 좋습니다. 본 튜토리얼에서는 https://xyz.wcaleniewolny.me/login/callback 를 리턴 URL로, xyz.wcaleniewolny.me 를 도메인으로 사용하겠습니다. 다음을 누르세요.
10. 데이터를 확인하고 Done
11. 클릭하세요 Continue
12. 클릭하세요 Save

키 생성하기

전체 보기로 돌아가기 All Identifiers
클릭하세요 Keys
플러스(+) 아이콘 클릭
키 이름 지정

이 이름은 중요하지 않으니 아무 이름이나 입력해도 됩니다.
선택 Sign in with Apple 클릭하세요 Configure
기본 App ID를 선택한 후 다음을 누르세요 Save

이 App ID는 이전 단계의 ID와 반드시 일치해야 합니다.
클릭하세요 Continue
클릭하세요 Register
Key ID를 복사하고 키를 다운로드하세요.

중요: 이 ID를 저장하세요. 백엔드에서는 다음과 같이 호출됩니다: KEY_ID. 키를 다운로드하세요. 이 키는 절대 공유해서는 안 됩니다.
다운로드한 키를 찾아 백엔드 폴더에 저장하세요.

Team ID 가져오기

사용하려면 Login with Apple Android에서 가져와야 합니다 Team ID이 값은 백엔드에서 사용됩니다.

다음으로 이동: 이 웹사이트에서 아래로 스크롤하여
다음 항목을 찾으세요: Team ID

앱 리다이렉트 설정

다이어그램에서 보셨듯이, 백엔드에서 다음 단계를 수행합니다. Redirect back to the app. 이 과정은 앱에 수동 설정을 추가해야 합니다.

다음 항목을 수정하세요. AndroidManifest.xml

파일을 여세요. 여기서는 AndroidStudio

다음 항목을 찾으세요: MainActivity 다음 Intent filter를 추가합니다.

<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>

다음 항목을 수정하세요. MainActivity

다음 파일을 여세요. MainActivity

다음 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);
}

백엔드 설정

Android에는 백엔드가 필수이지만, 백엔드 설정은 iOS에도 영향을 미칩니다. 예시 백엔드가 제공됩니다. 여기서

이 예제는 다음을 포함합니다:

간단한 JSON 데이터베이스
Apple 서버로부터 JWT를 요청하는 방법
간단한 JWT 검증

이 튜토리얼에서 설명한 내용을 바탕으로, env 섹션은 다음과 같이 구성됩니다:

ANDROID_SERVICE_ID = Service ID
IOS_SERVICE_ID = App 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'
  }
})

앱 생성하기

App ID가 없다면 플러스(+) 버튼을 클릭하세요
선택 App IDs 다음으로 계속을 클릭하세요
유형을 클릭하고 App 클릭하세요 Continue
설명과 App ID를 입력하세요
활성화 Sign with Apple capability
클릭 Continue
세부 정보를 확인하고 클릭하세요 Register

사용 중인 경우 Android에서 Apple 로그인 인증 및 계정 흐름을 계획하려면, 이를 다음 항목과 연결하세요 @capgo/capacitor-social-login 사용하기 @capgo/capacitor-social-login의 네이티브 기능 활용 시, @capgo/capacitor-social-login @capgo/capacitor-social-login의 구현 세부 사항, @capgo/capacitor-passkey @capgo/capacitor-passkey의 구현 세부 사항, @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric의 구현 세부 사항, 그리고 2단계 인증 2단계 인증의 구현 세부 사항.