[Dap JI ] expo expo-apple-authentication 사용해서 애플 로그인

애플로그인 구현 '시도 ' 해보기

 

앱스토어에 앱을 제출할 경우 만약 소셜로그인이 있으면 애플로그인도 필수! 그래서 애플로그인 구현해야한다.

 

expo에서는 애플로그인을 간단하게 구현할 수 있도록 도와주는 라이브러리가 있음. 

 

expo-apple-authentication, expo 공식 문서에도 친절하게 나와있음. 

https://docs.expo.dev/versions/latest/sdk/apple-authentication/

AppleAuthentication

구현 가보자~~~

 

npx expo install expo-apple-authentication

 

npm 설치 명령어, 

 

app.json에 애플 로그인을 허용해준다는 것을 설정해야함, 

{
  "expo": {
    "ios": {
      "usesAppleSignIn": true
    }
  }
}

 

그리고 공식문서에 나온 코드를 보면

 import * as AppleAuthentication from 'expo-apple-authentication';

 
 <AppleAuthentication.AppleAuthenticationButton
        buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
        buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
        cornerRadius={5}
        style={styles.button}
        onPress={async () => {
          try {
            const credential = await AppleAuthentication.signInAsync({
              requestedScopes: [
                AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
                AppleAuthentication.AppleAuthenticationScope.EMAIL,
              ],
            });
            const response = await instance.post("백엔드 요청 url", {
      		  identityToken: credential.identityToken,
    		  authorizationCode: credential.authorizationCode,
      		  user: credential.user, // 고유 Apple 사용자 ID
      });
          } catch (e) {
            if (e.code === 'ERR_REQUEST_CANCELED') {
              // handle that the user canceled the sign-in flow
            } else {
              // handle other errors
            }
          }
        }}
      />

•  buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
  • 버튼 디자인 설정이며 버튼에 보이는 텍스트, 

• buttonStyle={AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
  • 버튼의 색상 옵션

•  AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
•   AppleAuthentication.AppleAuthenticationScope.EMAIL,
• 이 두 옵션은 사용자의 이름과 이메일을 요청하는 설정, 
• 사용자의 프로필을 생성하거나 이메일 기반 인증이 필요하면 반드시 설정해 줘야함!

여기까지 설정하고 로그인 버튼 누르면 밑에서 사용자 이름과 apple로 로그인 하냐는 모달이 나옴!
그럼 콘솔에 사용자의 이름과 메일이 나온다. 

 

이제 백앤드랑 연결해야한다. 프론트에서 백엔드로 보내줘야하는 값들

const response = await instance.post("백엔드 요청 url", {
        identityToken: credential.identityToken,
        authorizationCode: credential.authorizationCode,
        user: credential.user, // 고유 Apple 사용자 ID
      });

 

여기서 credential 이란 

• credential
  • AppleAuthentication.signInAsync 함수가 반환하는 객체, 
  • 이 객체엔 apple 로그인 과정에서 사용자가 인증을 완료한 뒤 제공되는 사용자 데이터와 인증 정보를 포함
  • identityToken / authorizationCode / user / 등이 들어있다. 
  •  

 

• identityToken
  • apple에서 클라이언트 앱으로 반환한 jwt토큰, 
  • 이 토큰으로 사용자 인증 상태를 나타내며 apple서버에서 검증
  • 백엔드에선 이 토큰을 사용해 apple서버에 요청을 보내 토큰의 유효성 확인
  • 해당 토큰을 백엔드에서 디코딩해 값을 확인해보면 

{
  "sub": "00012345abcd",        // 사용자 고유 ID
  "email": "user@example.com", // (처음 로그인 시)
  "email_verified": "true",    // 이메일 검증 여부
  "iss": "https://appleid.apple.com", // 토큰 발급자
  "exp": 1699999999            // 토큰 만료 시간 (Unix Timestamp)
  "aud": '애플 개발자 계정에서 설정한 번들 id',
}

이런 내용을 확인할 수 있음, 

• authorizationCode
  • apple 로그인 요청 시 발급된 일회성 코드
  • 엑세스 토큰임
• user
  • 사용자 고유의 id
  • 일반적으로 이 값을 데이터베이스에 저장하여 사용자 계정을 관리

 

 

프론트의 역할은 이제 여기까지인 듯 싶은데... 일단 테스트 해보고 더 적어야지

---

12.02

네이티브 앱은 보통 프론트에서 리다이렉트, 

프론트 코드에서 로그인 성공하면 백엔드에서 설정한 리다이렉트 경로를 받아 라우팅 시켜주자. 

 

백엔드 코드, 성공하면 클라이언트에  json데이터로 전달

 res.json({
          message: "Login successful",
          redirectTo: "/gym", 
        });

 

클라이언트에선 백엔드의 redirect to 를 파싱해 리다이렉트 코드 추가

 if (response.data.redirectTo) {
        router.dismissTo(response.data.redirectTo); // 클라이언트가 리다이렉트 처리
        console.log(response.data.redirectTo);
      }

 

identityToken만을 사용하는 클라이언트 중심 방식과 

authorizationCode 같이 사용하는 서버 중심 방식으로 나눌 수 있다. 

 

음...일단은 로그인 구현은 성공, 유저 정보를 더 세밀하게 관리하려면 authorizationCode를 사용해서 관리하는 방식으로 해야할듯?