flutter 애플 로그인

0. 준비물..

1. 애플 개발자 계정

2. 파이어베이스 프로젝트

 

1. 파이어베이스 애플 로그인 개설

파이어베이스 프로젝트 내 Authentication에 들어가서 로그인 제공업체 Apple을 선택한다.

 

 

서비스 ID 부분은 비어두고 (안드로이드 설정 시 필요함) 아래 콜백 URL을 복사해둔다.

 

 

 

2. 애플 개발자 계정 AppID 만들기

애플 개발자 계정으로 로그인 후, Certificates, Identifiers & Profiles의 Identifiers를 들어간다.

AppID가 없다면 +버튼을 눌러 AppID를 만들어 준다.

 

 

AppID 생성 시 하단의 Sign In with Apple를 체크 해주고 Edit 버튼을 클릭한다.

 

 

아래 부분의 Server-to-Server Notification Endpoint 에 앞서 복사했던 애플 로그인 콜백 URL을 넣어준다.

 

 

이후 상단 Save를 누르고 모든 내용을 저장하면 AppID가 만들어 진다.

 

 

3. AppID로 Key 만들기

왼쪽의 Keys탭으로 들어가 Key를 만든다. 없다면 +버튼을 눌러 만들어 준다.

 

 

Key 이름을 적고 하단에서 Sign in with Apple을 체크하고 오른쪽 Configure 버튼을 누른다.

 

 

아까 만들어 줬던 AppID를 선택하고 Save한다.

 

 

만들어 준다.

 

 

 

4. 애플 개발자 계정 ServiceID 만들기

ServiceID는 안드로이드에서 애플 로그인을 이용할 때 필요하다. IOS만 개발한다면 굳이 필요없다.

 

Identifier는 AppID를 역순으로 넣으라고 한다. 만약 com.example.abcd라면 abcd.example.com으로 하란 뜻..

아래 Sign In with Apple을 체크하고 오른쪽의 Configure버튼을 클릭해준다.

 

 

Primary App ID에는 사용할 AppID를 지정해주고 

Register Website URLs는 콜백받을 서버URL을 적어주면 된다.

이후 안드로이드 설정에서 이 URL로 콜백을 받아야 한다.

 

 

앞서 파이어베이스에서 만든 애플 제공업체 설정에 들어가 서비스ID에 해당 serviceID의 Identifier를 등록해준다.

 

 

 

5. Xcode 설정하기

Xcode를 실행한 후 Runner > Signing & Capabilities에 들어가 상단 +Capability를 클릭하고

Sign in with Apple을 찾아서 추가해준다.

 

 

 

6. 이제 로그인 코드부분을 만들어 준다.

sign_in_with_apple 패키지를 다운받고 코드를 작성한다.

 

sign_in_with_apple | Flutter package

 

IOS

아래 코드를 이용하면 바로 애플 로그인 팝업창이 뜬다.

 

 

 

안드로이드

안드로이드의 경우 위 코드를 실행하면 아래의 오류가 뜬다.

sign_in_with_apple 패키지의 설명을 읽어보면 안드로이드는 해야할 설정들이 더 남아있다..

 

 

1)

서버측에서 콜백 URL을 생성해줘야 한다. 패키지 설명에서 제공해주는 아래 glitch 사이트를 들어간다.

 

Flutter Sign In With Apple Example

 

2)

View source라는 버튼을 클릭하면 express 프로젝트가 하나 나오는데

server.js에 들어가 보면 아래 코드가 보인다. 이 코드를 사용하는 서버에 맞게 만들어 주면 된다.

 

// The callback route used for Android, which will send the callback parameters from Apple into the Android app.
// This is done using a deeplink, which will cause the Chrome Custom Tab to be dismissed and providing the parameters from Apple back to the app.
app.post("/callbacks/sign_in_with_apple", (request, response) => {
  const redirect = `intent://callback?${new URLSearchParams(
    request.body
  ).toString()}#Intent;package=${
    process.env.ANDROID_PACKAGE_IDENTIFIER
  };scheme=signinwithapple;end`;

  console.log(`Redirecting to ${redirect}`);

  response.redirect(307, redirect);
});

 

3) AndroidManifest.xml 파일에 아래 activity를 추가해준다.

 

 

4) 마지막으로 코드부분에 webAuthenticationOptions를 추가해준다. 

clientId에는 serviceID를 넣어주고, redirectUri에 서버콜백URL을 넣어주면 된다.

그러면 애플 로그인 웹이 호출되고 로그인을 할 수 있게 된다.

 

 

5) firebase를 통한 로그인 정보를 얻기 위해서는 firebase.OauthProvider를 이용해야 한다. 

아래 코드에 나와있다.

 

전체 코드

 

void signInWithApple() async {
    final credential = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
      // for Android
      webAuthenticationOptions: WebAuthenticationOptions(
        clientId: ${ServiceID},
        redirectUri: Uri.parse(${ServiceID에 등록한 서버 콜백URL}),
      )
    );
	
    // firebase를 이용한 로그인 정보 추출
    final oauthCredential = firebase.OAuthProvider('apple.com').credential(
      idToken: credential.identityToken,
      accessToken: credential.authorizationCode,
    );

    log("애플 로그인 결과 : ${await firebase.FirebaseAuth.instance.signInWithCredential(oauthCredential)}");
  }