[Flutter] Apple Login ① - 준비

마지막으로 구현할 소셜로그인은 애플 로그인 입니다.

애플 로그인을 구현하기 위해서는 개발자 계정에 가입되어있어야하고 비용은 1년에 13만원 입니다. ㅠㅠ

 

Apple Developer

 

애플로그인을 구현 전에 크게 3가지를 셋팅해야합니다.

• App ID
• Key
• Service ID

 

• 로그인 후 Account 를 눌러주세요.

 

 

• 좌측 사이드바에서 Certificates, IDs & Profiles 를 눌러주세요.

 

 

 

 

App ID 설정

• Identifiers 를 누르고 + 버튼을 눌러주세요.

 

 

 

• App IDs 를 체크하고 Continue

 

 

 

• App 선택 후 Continue

 

 

 

• 간략한 설명과 번들 ID 를 넣어주고 아래로 내려갑니다.

 

 

 

• 아래로 내려와서 Sign In with Apple 체크해주고 Continue

 

 

 

• Register 을 계속 눌러주면 App ID 설정이 완료 됩니다.

 

 

 

 

Key 설정

• 좌측 사이드바에서 Keys 를 눌러주고 + 버튼 또는 Create a key 를 눌러주세요. 

 

 

• Key Name 을 작성하고 아래에 Sign in with Apple 을 체크 후 Configure 를 눌러주세요.

 

 

• 아까 등록한 App ID 를 선택해주고 Save 후 Continue

 

 

 

• Register

 

 

 

• 대충 잃어버리면 큰일난다는 메세지 입니다. Done 눌러주세요.

 

 

 

 

Service ID 설정

• 좌측 사이드바에서 Identifiers 를 누르고 + 버튼을 눌러주세요.

 

 

 

• Services IDs 를 체크 후 Continue

 

 

 

• 간략한 설명을 넣어주고 Identifier 를 넣어주고 Continue
• Identifier 권장사항은 App ID 를 역순으로 넣어주라고 합니다.
• ex ) App ID 가 com.study.socialLoginApp.QWERASD 라면 QWERASD.socialLoginApp.study.com

 

 

 

• Register 를 눌러주세요. Redirect Url 은 뒤에 설정하겠습니다.

 

 

 

iOS 설정

• 아래의 명령어로 XCode 를 켜주세요.

open ios/runner.xcworkspace

 

• Signing & Capabilities 에서 + 버튼을 눌러주세요.

 

 

 

• Sign in with Apple 을 찾아서 더블클릭 해주면 끝입니다.
• 간혹 뜨지 않는 경우가 있는데 그럴대는 Automatically manage signing 체크 해제하고 시도해주세요.

 

 

 

 

 

Android 설정

android / app / src / main / Android Manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.study.social_login_app">
   <application
        android:label="social_login_app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
        .
        .
        .
        <!-- 추가 -->
        <activity
          android:name="com.aboutyou.dart_packages.sign_in_with_apple.SignInWithAppleCallback"
          android:exported="true">
             <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="signinwithapple" />
                <data android:path="callback" />
             </intent-filter>
        </activity>
        .
        .
        .
    </application>
</manifest>

 

 

 

Android Redirect Url 설정

Redirect Url 설정은 직접 서버를 구현하는 방법도 있지만 pub.dev/sign_in_with_apple 에서 glitch 에서 간단하게 구현할 수 있는 방법을 적어놓았습니다.

 

Flutter Sign In With Apple Example

 

 

•  아래의 Remix your own 을 눌러주면 노드 프로젝트가 생성됩니다.

 

 

 

• .env 를 누르고 필요한 TEAM_ID, SERVICE_ID, BUNDLE_ID, KEY_ID, KEY_CONTENTS, ANDROID_PACKAGE_IDENTI 6가지 값을 넣어줍니다.

 

 

 

TEAM_ID, BUNDLE_ID

• Team ID - 아까 생성한 AppID 에서 AppID Prefix 입니다.
• Bundle ID - ios 프로젝트 bundle ID 값 입니다.

 

 

 

SERVICE_ID

• Identifiers 에서 우측에 Services IDs 를 눌러주면 나오는 IDENTIFIER 값 입니다.

 

 

KEY_ID

• Key 상세에서 나오는 Key ID 값입니다.
• KEY_CONTENTS 값을 알기 위해 키를 Download 해주세요.

 

 

KEY_CONTENTS

• 다운받은 키를 텍스트 편집기를 통해 열어봅니다.

 

 

키값이 3줄로 되어있을건데 이것을 한줄로 만들어서 넣어주시면 됩니다.

 

----BEGIN PRIVATE KEY ----

QWERTYUIOPQWERTYUIOP_1

_ASDFGHJKLASDFGHJKL_2

_ZXCVBNMZXCVBNM_3

----END PRIVATE KEY ----

 

ex)

QWERTYUIOPQWERTYUIOP_1_ASDFGHJKLASDFGHJKL_2_ZXCVBNMZXCVBNM_3

 

 

ANDROID_PACKAGE_IDENTI

• 프로젝트의 안드로이드 패키지명을 넣어주시면 됩니다.

 

 

 

Service ID Redirect Url 설정

• 좌측 사이드바에서 Identifiers 를 누르고 우측에 Service IDs 로 설정 후 아까 생성한 Service ID 를 누릅니다. 

 

 

 

• Configure 를 눌러주세요.

 

 

 

• 아까 생성한 App ID 를 선택 하고 나머지 값들을 넣어준 후 Save 를 눌러주세요.

 

 

• Register Website URLs 작성방법은 다음과 같습니다.

 

 

Domains and Subdomains

빨간네모 안에 있는 값 뒤에 .glitch.me 를 붙여주면 됩니다.

ex) denim-charmed-coach.glitch.me

 

Return URIs

Domains and Subdomains 앞에 https://

Domains and Subdomains 뒤에 /callbacks/sign_in_with_apple 을 붙여주세요.

ex) https://denim-charmed-coach.glitch.me/callbacks/sign_in_with_apple

 

 

 

• Done 을 눌러서 넘어가주세요.

 

 

 

• Continue 를 누르면 모든 셋팅이 끝납니다.