내용으로 건너뛰기

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

GitHub

안드로이드에서 애플 로그인은 약간의 장난감입니다. 애플은 안드로이드에서 공식적으로 지원하지 않기 때문에. Sign in with Apple 안드로이드에서 OAuth2 웹사이트를 표시하기 위해 Chrome 탭을 사용하고 있습니다. 이 접근 방식에는 다음과 같은 문제점이 있습니다:

어려운 구성

  • 백엔드가 필요합니다
  • 안드로이드에서 흐름을 이해하는 것이 어렵습니다.

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

Understanding the flow on android.

안드로이드 플로우를 설명하기 위해 다이어그램을 사용해 보겠습니다:

이제 문제와 플로우를 이해하셨다면, 설정을 시작해 보겠습니다.

서비스 ID를 생성하는 방법

서비스 ID를 생성하는 방법
  1. 애플 개발자 Portal로 로그인하세요. 애플 개발자 Portal.

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

    이런 화면을 보실 수 있습니다:

    애플 개발자 Portal의 식별자 화면

    이 필드의 값이
    1. 이 필드의 값이 App IDs
    2. 앱 ID를 찾을 수 있는지 확인하세요.
  3. 앱이 Sign in with Apple 능력을 활성화되어 있는지 확인하세요.

    1. 앱을 클릭하세요. 앱 목록에서 앱을 선택하세요.
    2. 앱이 Sign in with Apple 능력을 활성화되어 있는지 확인하세요. 애플 로그인 기능이 활성화된 체크박스
    3. 활성화되지 않은 경우 활성화하세요.
  4. 모두 돌아가기 All Identifiers

    모든 식별자
  5. 클릭하여 App Ids 그리고 Services IDs

    서비스 ID의 섹션으로 이동
  6. 새로운 식별자 만들기

    1. 플러스 버튼 클릭

      새로운 서비스 ID 추가
    2. 선택 Servcice IDs 클릭 Continue

      서비스 ID 선택 옵션
    3. 설명과 식별자 입력 후 클릭 Continuie.

      서비스 ID 세부 정보 입력
    4. 상세 정보를 확인하고 Register

      서비스 ID 등록 확인
    5. 새로 생성된 서비스

      새로 생성된 서비스 ID를 선택
    6. 기능 Sign in with Apple 기능 활성화

      서비스 ID에 대해 애플 로그인 활성화
    7. 설정 Sign In with Apple

      Apple과 함께 로그인하기 버튼을 구성하십시오
    8. 이것을 Primary App ID 애플 로그인 설정에서 이전 단계에서 구성한 App ID로 설정하십시오

      기본 App ID 설정 드롭다운
    9. 이미지 호스팅을 위해 사용할 백엔드 도메인을 추가하십시오.

      도메인 및 반환 URL 필드 설정
    10. 다음 단계로 진행하기 전에 데이터를 확인하고 클릭하세요. Done

      도메인 및 리턴 URL 설정 확인
    11. 클릭하여 서비스 설정을 계속하세요. Continue

      클릭하여 서비스 설정을 저장하세요.
    12. 키 생성 Save

      키 생성 섹션
  1. 도메인 및 리턴 URL 설정 확인 All Identifiers

    모든 식별자
  2. 클릭하여 Keys

    Apple Developer Portal의 키 섹션
  3. 플러스 아이콘을 클릭하여

    새 키 추가
  4. 키 이름을 입력하세요

    주의
  5. 이름을 입력하세요 Sign in with Apple 선택 Configure

    Apple과 Android를 위한 Sign in with Apple 설정
  6. 기본 App ID를 선택하고 Save

    기본 App ID를 선택하는 방법
  7. 클릭하여 Continue

    설정 키 구성에 대한 Continue 버튼
  8. 클릭하여 Register

    키 생성에 대한 Register 버튼
  9. 키 ID를 복사하고 키를 다운로드하세요.

    키 ID와 다운로드 버튼 화면
  10. 다운로드 한 키 파일을 찾으세요. 백엔드 폴더에 저장하세요.

    다운로드 한 키

Android를 사용하려면 Login with Apple Android를 사용하려면 Team ID를 얻어야 합니다. 백엔드에서 사용할 것입니다.

  1. 이 웹사이트로 이동하고 아래로 스크롤하세요 개발자 계정에서

  2. 팀 ID 위치를 찾으세요 Team ID

    앱 리다이렉트 구성

앱 리다이렉트 구성 섹션

그림에서 보았듯이 백엔드에서는

단계를 수행합니다. 이 단계는 앱의 수동 변경이 필요합니다. Redirect back to the app수정하세요

  1. 파일을 열어보세요. 나는 Android Studio에서 AndroidManifest.xml
    1. AndroidManifest.xml 파일을 사용합니다. AndroidStudio

      AndroidManifest.xml 파일
    2. Apple과 Android의 MainActivity 그리고 다음 Intent filter를 추가하세요

      MainActivity에 다음 Intent filter code를 추가하세요
      <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 MainActivity
    1. Android Studio에서 MainActivity.java 파일을 열어주세요 MainActivity

      다음 __CAPGO_KEEP_0__을 MainActivity에 추가하세요
    2. MainActivity에 다음 code을 추가하세요

      Code to add to MainActivity for handling deep links
      @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);
      }

A backend is required for Android, but configuring a backend will also impact IOS. An example backend is provided 여기

This example provides the following:

  • A simple JSON database
  • Apple의 서버에서 JWT를 요청하는 방법
  • A simple JWT verification

이 튜토리얼에서 설명한 모든 것을 고려하여, 다음과 같이 진행합니다. 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 그러나 ,메소드의 사용 방법은 약간 다릅니다. initialize 클립보드에 복사

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

앱을 생성하는 단계

앱을 생성하는 단계
  1. 애플 로그인에 대한 앱 ID가 아직 없는 경우 플러스 버튼을 클릭하세요

    새로운 식별자 플러스 버튼
  2. 선택 App IDs 그리고 계속 클릭

    앱 ID 타입 선택
  3. 타입 클릭 App 클릭 Continue

    앱 타입 선택
  4. 설명과 앱 ID 입력

    설명과 번들 ID 입력
  5. 활성화 Sign with Apple 기능

    애플 로그인 기능 활성화
  6. 클릭 Continue

    앱 등록을 계속하기 위한 버튼
  7. 세부 정보를 확인하고 클릭하세요 Register

    앱 등록 세부 정보 확인

애플 로그인 Android에서 계속하기

애플 로그인 Android에서 계속하기 제목

애플 로그인 Android을 사용 중이라면 애플 로그인 Android을 사용 중이라면 인증 및 계정 흐름을 계획하고, 연결하세요 사용자 @capgo/capacitor-social-login 사용자 @capgo/capacitor-social-login implementation detail @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-passkey 구현 세부 사항에 대한 @capgo/capacitor-passkey @capgo/capacitor-native-biometric 구현 세부 사항에 대한 @capgo/capacitor-native-biometric, 그리고 두 단계 인증 구현 세부 사항에 대한 두 단계 인증.