Android 애플 로그인

이 플러그인에 대한 설치 단계와 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사하세요.

안드로이드에서 애플 로그인은 약간의 해킹입니다. 애플은 안드로이드에서 공식 지원을 제공하지 않기 때문에 Sign in with Apple 안드로이드에서 사용하는 솔루션은 약간의 해킹입니다.

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

구성하기 어려움
백엔드가 필요합니다

안드로이드에서 흐름을 이해하는 어려움

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를 생성하는 단계

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

애플 개발자 Portal의 식별자 화면
1. __CAPGO_KEEP_0__ App IDs
2. 앱 ID를 찾을 수 있는지 확인하세요.
  iOS에서 Apple 로그인을 구성하지 않았다면, 하나를 생성해야 합니다. 저는 이미 하나가 생성되어 있습니다. 사용할 앱 ID는 me.wcaleniewolny.test.ionic.vue이미 하나가 생성되어 있다면, 다음 단계를 참조하세요. 앱을 생성하는 단계.
앱이 올바르게 구성되어 있는지 확인하세요. Sign in with Apple 앱을 클릭하세요.
1. 앱 목록에서 앱을 선택하세요.
2. 앱이 올바르게 구성되어 있는지 확인하세요. Sign in with Apple 앱이 올바르게 구성되어 있는지 확인하세요.
3. 활성화되지 않은 경우 활성화하세요.
모두 돌아가기 All Identifiers
클릭하여 App Ids 그리고 서비스 ID로 이동하세요. Services IDs
플러스 버튼 클릭
1. 새로운 서비스 ID 추가
2. 클릭 Servcice IDs 이동 Continue
3. 설명과 식별자 입력 후 클릭 Continuie.
  
  이것은 identifiers 이것이 백엔드에서 사용할 clientId 함수에 전달할 initialize 식별자입니다. ANDROID_SERVICE_ID 잘 저장하세요!!!
  주의
  
  서비스 ID는 앱 ID와 일치할 필요는 없지만, 서비스 ID를 YOUR_APP_ID.service 로 설정하는 것을 추천합니다. me.wcaleniewolny.test.ionic.vue 앱 ID를 ee.forgr.io.ionic.service2 로 사용하고 서비스 ID를
4. 로 사용하고 있습니다. Register
5. 서비스 ID 등록 확인
6. 새로 생성된 서비스 ID Sign in with Apple 기능을 활성화합니다.
7. 설정하기 Sign In with Apple
8. 이것을 Primary App ID __CAPGO_KEEP_0__
9. 설정
  
  이것이 이것이 이것이 Return URLs이 튜토리얼을 계속하기 전에 뒤로 가서 이 섹션을 다시 읽어보세요. 그리고 백엔드 설정을 완료하세요. https://xyz.wcaleniewolny.me/login/callback 리턴 URL과 도메인을 위해 사용할 것입니다. xyz.wcaleniewolny.me 리턴 URL과 도메인을 입력하세요.
10. 다음 단계로 진행하세요. Done
11. 서비스 설정을 계속하세요. Continue
12. 키를 생성하세요. Save

모두 보기로 돌아가세요.

설정 완료 후 다시 돌아와서 이 섹션을 읽어보세요. All Identifiers
클릭하여 Keys
플러스 아이콘을 클릭하여
키 이름을 입력하세요

선택
클릭 Sign in with Apple 이름을 입력하세요 Configure
기본 App ID를 선택하고 클릭하세요 Save

이 App ID는 이전 단계에서 사용한 ID와 동일해야 합니다.
클릭하여 다음 단계로 진행하세요 Continue
키 생성에 대한 등록 버튼 Register
키 ID 및 다운로드 버튼 화면

중요: 이 ID를 저장하세요. 백엔드에서는 이 ID를 KEY_ID다운로드 키를 다운로드하세요. 이 키를 절대 공유하지 마세요.
다운로드한 키 파일을 찾으세요. 백엔드 폴더에 저장하세요.

팀 ID를 가져오는 방법

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

이 웹사이트로 이동하여 아래로 스크롤하세요. 이 웹사이트로 이동하여 아래로 스크롤하세요. 이 웹사이트로 이동하여 아래로 스크롤하세요.
개발자 계정에서 팀 ID 위치를 찾으세요. Team ID

앱 리다이렉트 구성 섹션

앱 리다이렉트 구성 Redirect back to the app섹션 제목 ‘앱 리다이렉트 구성’

이 단계는 앱의 수동 변경이 필요합니다. AndroidManifest.xml
1. 파일을 열어보세요. 나는 Android Studio에서 AndroidManifest.xml 파일을 사용할 것입니다. AndroidStudio
2. Apple과 Android에서 사용하는 소셜 로그인 플러그인을 설정하는 방법 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>
```

MainActivity를 수정하세요 MainActivity

Android Studio에서 MainActivity.java 파일을 열어주세요 MainActivity

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

다음 예시를 제공합니다.

간단한 JSON 데이터베이스
애플 서버에서 JWT를 요청하는 방법
JWT 검증

이 튜토리얼에서 말한 모든 것을 고려하여, 다음은 어떻게 하면 되는지 설명합니다. 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'
  }
})

앱을 생성하는

애플 로그인에 대한 앱 ID가 이미 없는 경우, 플러스 버튼을 클릭하십시오.
선택 App IDs 그리고 계속 클릭
타입 클릭 App 그리고 클릭 Continue
설명과 앱 ID 입력
활성화 Sign with Apple 기능
클릭 Continue
세부 정보를 확인하고 클릭하세요 Register

애플 로그인 on Android를 사용 중이라면 애플 로그인 on Android를 사용 중이라면 인증 및 계정 흐름을 계획하고 사용하는 경우, @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login을 연결하세요 native capability을 위해 @capgo/capacitor-social-login을 사용하세요 @capgo/capacitor-social-login @capgo/capacitor-social-login @capgo/capacitor-social-login Apple @capgo/capacitor-passkey Apple @capgo/capacitor-passkey 구현 세부 사항 Apple @capgo/capacitor-native-biometric Apple @capgo/capacitor-native-biometric 구현 세부 사항 두 단계 인증 두 단계 인증 구현 세부 사항