콘텐츠로 건너뛰기
Capgo

Android에서 Apple 로그인

Android의 Apple 로그인은 해킹적입니다. Apple은 Android에서 Sign in with Apple에 대한 공식 지원이 없으므로 솔루션이 약간 해킹적입니다.

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

  • 어려운 구성
  • 백엔드가 필요함

Android에서의 플로우 이해

Section titled “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)

이제 문제와 플로우를 알았으니 구성을 시작하겠습니다.

서비스 ID 생성

Section titled “서비스 ID 생성”

  1. Apple Developer Portal에 로그인합니다.

  2. Identifiers를 클릭합니다.

    Apple Developer Portal Identifiers 섹션

    다음과 같은 화면이 표시됩니다:

    Apple Developer Portal Identifiers 화면
    1. 이 필드에 App IDs가 표시되는지 확인하세요
    2. App ID를 찾을 수 있는지 확인하세요.

  3. 앱에 대해 Sign in with Apple 기능이 활성화되어 있는지 확인하세요

    1. 앱을 클릭합니다 목록에서 앱 선택
    2. Sign in with Apple 기능이 활성화되어 있는지 확인합니다 Sign in with Apple 기능 활성화 체크박스
    3. 활성화되어 있지 않으면 활성화합니다.

  4. All Identifiers로 돌아갑니다

    All Identifiers 탐색 버튼

  5. App Ids를 클릭하고 Services IDs로 이동합니다

    Services IDs 섹션으로 탐색

  6. 새 식별자를 생성합니다

    1. 더하기 버튼을 클릭합니다

      새 서비스 ID 추가 버튼

    2. Servcice IDs를 선택하고 Continue를 클릭합니다

      Service IDs 옵션 선택

    3. 설명과 식별자를 입력하고 Continuie를 클릭합니다.

      서비스 ID 세부 정보 입력

    4. 세부 정보를 확인하고 Register를 클릭합니다

      서비스 ID 등록 확인

    5. 새로 생성된 서비스를 클릭합니다

      새로 생성된 서비스 ID 선택

    6. Sign in with Apple 옵션을 활성화합니다

      서비스 ID에 대한 Sign in with Apple 활성화

    7. Sign In with Apple을 구성합니다

      Sign in with Apple 구성 버튼

    8. Primary App ID가 이전 단계에서 구성한 App ID로 설정되어 있는지 확인합니다

      Primary App ID 드롭다운 설정

    9. 백엔드를 호스팅할 도메인을 추가합니다.

      도메인 및 반환 URL 필드 설정

    10. 데이터를 확인하고 Done을 클릭합니다

      도메인 및 반환 URL 구성 확인

    11. Continue를 클릭합니다

      서비스 구성을 위한 Continue 버튼

    12. Save를 클릭합니다

      서비스 구성을 위한 Save 버튼

키 생성

Section titled “키 생성”

  1. All Identifiers로 돌아갑니다

    All Identifiers 탐색 버튼

  2. Keys를 클릭합니다

    Apple Developer Portal의 Keys 섹션

  3. 더하기 아이콘을 클릭합니다

    새 키 추가 버튼

  4. 키 이름을 지정합니다

    키 이름 필드 입력

  5. Sign in with Apple을 선택하고 Configure를 클릭합니다

    키에 대한 Sign in with Apple 활성화 및 구성

  6. 기본 App ID를 선택하고 Save를 누릅니다

    키에 대한 기본 App ID 선택

  7. Continue를 클릭합니다

    키 구성을 위한 Continue 버튼

  8. Register를 클릭합니다

    키 생성을 위한 Register 버튼

  9. 키 ID를 복사하고 키를 다운로드합니다.

    키 ID 및 다운로드 버튼 화면

  10. 다운로드한 키를 찾아 백엔드 폴더에 저장합니다.

    다운로드된 키 파일

Team ID 가져오기

Section titled “Team ID 가져오기”

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

  1. 이 웹사이트로 이동하여 아래로 스크롤합니다

  2. Team ID를 찾습니다

    개발자 계정의 Team ID 위치

앱 리디렉션 구성

Section titled “앱 리디렉션 구성”

다이어그램에서 본 것처럼 백엔드는 Redirect back to the app이라는 단계를 수행합니다. 이를 위해서는 앱을 수동으로 변경해야 합니다.

  1. AndroidManifest.xml 수정

    1. 파일을 엽니다. 저는 AndroidStudio를 사용하겠습니다

      Android Studio의 AndroidManifest.xml 파일

    2. MainActivity를 찾고 다음 Intent 필터를 추가합니다

      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. MainActivity 수정

    1. MainActivity를 엽니다

      Android Studio의 MainActivity.java 파일

    2. 다음 코드를 추가합니다:

      딥 링크 처리를 위해 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);
      }

백엔드 구성

Section titled “백엔드 구성”

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

플러그인 사용

Section titled “플러그인 사용”

login 함수의 사용법은 변경되지 않으며 iOS와 동일합니다. 자세한 내용은 해당 섹션을 참조하세요. 그러나 initialize 메서드는 약간 변경됩니다.

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

앱 생성

Section titled “앱 생성”

  1. 아직 App ID가 없는 경우 더하기 버튼을 클릭합니다

    새 식별자 추가 더하기 버튼

  2. App IDs를 선택하고 continue를 클릭합니다

    App IDs 유형 선택

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

    App 유형 선택

  4. 설명과 앱 ID를 입력합니다

    앱 설명 및 번들 ID 입력

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

    Sign in with Apple 기능 활성화

  6. Continue를 클릭합니다

    앱 등록을 위한 Continue 버튼

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

    앱 등록 세부 정보 확인