Sign in with Apple 풀스택(iOS + Node.js) 개발 노트

애플로그인기능을 클라이언트(iOS)와 백엔드(Node.js)로 풀스택 개발하려 했는데

iOS 개발하는 자료는 백엔드를 어떻게 구현 했는지 나오지 않고, 백엔드를 개발하는 자료는 iOS를 어떻게 구현하는지 나오지 않고, 풀스택 개발 자료는 전부 iOS가 아니라 웹+백엔드 풀스택 자료들인데다가 자료들이 전부 오래되서 맞지 않는게 너무 많았다.

그래서 삽질에 삽질을 겪으며 개발을 했는데 풀스택 개발 하는 누군가는 그런 고통을 겪지 않기를 바람!

---

목차

1. 준비

2. iOS 클라이언트 개발

3. Node.js 백엔드 개발

4. 마무리

 

---

준비

1. Apple Developer에서 App ID 설정

• Certificates, Identifiers & Profiles >  Identifiers > App IDs 추가
• 번들 아이디는 애플 로그인을 붙여주기 위해 만들어준 앱의 Bundle Identifier로 지정
• Capabilities 항목중에서 아래로 내려 Sign In With Apple 항목을 선택
• Sign In With Apple 항목 edit에서 App ID 그룹, Server to Server Notification Endpoint는 따로 설정하지 않고 저장

2. Apple Developer에서 Key 설정

• Certificates, Identifiers & Profiles >  Keys > Sign In With Apple 항목을 선택
• 위에서 등록한 App ID 선택하면 인증키 발급
• 인증키(.p8 파일)는 한번만 다운로드 할수있으므로 잃어버리지 않도록 주의!

3.  Capabilities 추가

• xcode 앱 타겟에서 Signing&Capabilities
• 여기서 좌측 상단 + 버튼을 눌러 Sign in with Apple 항목을 추가

초기설정 끝! (웹서비스를 만드는게 아니면Apple Developer에서 Services는 등록할 필요없음)

---

iOS 클라이언트 개발

1. 버튼을 만들고 탭하였을때 viewModel의 로그인 함수를 호출하도록 action 정의

(Info.plist -> Information Property List -> Localization native development region을 Korea로 변경하면 애플로그인 버튼이 한국어로 나온다!)

// 애플 로그인 버튼
private let appleBtn: ASAuthorizationAppleIDButton = {
    let btn = ASAuthorizationAppleIDButton(
        authorizationButtonType: .signIn,
        authorizationButtonStyle: .black
    )
    return btn
}()

// 중략...

// 애플로그인버튼 탭하면 뷰모델의 login함수 호출
self.appleBtn.rx.tapGesture()
    .when(.recognized)
    .asDriver { _ in .empty() }
    .drive(onNext: { [weak self] _ in
        self?.welcomeViewModel.login(provider: .apple)
    })
    .disposed(by: self.disposeBag)

2. ASAuthorizationControllerDelegate 구현

Delegate Proxy를 활용해서 ASAuthorizationControllerDelegate의 didCompleteWithAuthorization를 Rx로 구현함

// Delegate Proxy 구현
final class RxASAuthorizationControllerDelegateProxy:
    DelegateProxy<ASAuthorizationController, ASAuthorizationControllerDelegate>,
    DelegateProxyType,
    ASAuthorizationControllerDelegate
{
    static func registerKnownImplementations() {
        self.register {
            RxASAuthorizationControllerDelegateProxy(
                parentObject: $0,
                delegateProxy: RxASAuthorizationControllerDelegateProxy.self
            )
        }
    }
    
    static func currentDelegate(for object: ASAuthorizationController) -> ASAuthorizationControllerDelegate? {
        object.delegate
    }
    
    static func setCurrentDelegate(_ delegate: ASAuthorizationControllerDelegate?, to object: ASAuthorizationController) {
        object.delegate = delegate
    }
}

extension Reactive where Base: ASAuthorizationController {
    var delegate: DelegateProxy<ASAuthorizationController, ASAuthorizationControllerDelegate> {
        RxASAuthorizationControllerDelegateProxy.proxy(for: base)
    }
    
    var didCompleteAuthorization: Observable<Authentication?> {
        delegate
            .methodInvoked(#selector(ASAuthorizationControllerDelegate.authorizationController(controller:didCompleteWithAuthorization:)))
            .map { parameters in
                guard let authorization = parameters[1] as? ASAuthorization,
                      let credential = authorization.credential as? ASAuthorizationAppleIDCredential,
                      let identityTokenData = credential.identityToken,
                      let authorizationCodeData = credential.authorizationCode,
                      let identityToken = String(data: identityTokenData, encoding: .utf8),
                      let authorizationCode = String(data: authorizationCodeData, encoding: .utf8)
                else {
                    Crashlytics.crashlytics().record(
                        error: CustomError(memo: "didCompleteWithAuthorization with nil")
                    )
                    return nil
                }
                
                // 첫번째 회원가입 성공이후 부터 애플로그인시에는 빈값으로 넘어옴
                let givenName = credential.fullName?.givenName ?? ""
                let userEmail = credential.email ?? ""
                
                return .init(
                    accessToken: nil,
                    refreshToken: nil,
                    identityToken: identityToken,
                    authorizeCode: authorizationCode,
                    snsUserName: givenName,
                    snsUserEmail: userEmail,
                    snsUserId: credential.user
                )
            }
    }
}

3. 애플로그인 구현

func appleAuthorize() -> Observable<Authentication> {
    let request = ASAuthorizationAppleIDProvider().createRequest()
    request.requestedScopes = [.fullName, .email]
    let controller = ASAuthorizationController(authorizationRequests: [request])
    controller.performRequests()
        
    // 여기서 리턴되는 authorizeCode, identityToken, userId등 정보를 서버에 보내주는데
    // 애플의 accessToken과 refreshToken을 발급 받는데는 authorizeCode가 필요하다
    return controller.rx.didCompleteAuthorization
        .filterNil()
        .first()
        .asObservable()
        .filterNil()
}

4. node 백엔드 서버에 애플로그인 정보를 넘겨주면 클라이언트 끝!

---

Node.js 백엔드 개발

1. 클라이언트로부터 authorizeCode를 받으면 애플서버로 부터 accessToken과 refreshToken을 발급한다

const axios = require("axios");
const { response } = require("express");
const { user } = require("../../models");
const fs = require("fs");
const querystring = require('querystring');
const jwt_decode = require("jwt-decode");
const jwt = require("jsonwebtoken");
const jwksClient = require("jwks-rsa");

module.exports = async (req, res) => {
  const { authorizeCode } = req.body; // 클라이언트에서 받은 authorizeCode

  try {
  
    /*--------------------- 1. generate access token, refresh token -------------------------*/

    // make client_secret
    const algorithm = process.env.ALG;  // 알고리즘 : ES256
    const keyid = process.env.KID;  // [Key ID]
    const issuer = process.env.ISS;  // [팀 ID = App ID Prefix]
    const expiresIn = 15777000;         // 토큰만료시간 6개월(초),  토큰생성시간 -> jwt.sign()에 전달안해주면 현재시간으로 세팅
    const audience = "https://appleid.apple.com";
    const subject = process.env.SUB;  // [앱번들아이디]
    const authkey = fs.readFileSync(process.env.AUTHKEY, 'utf8'); // Apple Developer에서 다운로드받은 .p8파일

    const client_secret = jwt.sign(
      {},
      authkey,
      {
        algorithm: algorithm,
        keyid: keyid,
        issuer: issuer,
        audience: audience,
        subject: subject,
        expiresIn: expiresIn
      });

    const tokenresult = await axios.post(
      'https://appleid.apple.com/auth/token',
      querystring.stringify({
        grant_type: 'authorization_code',	
        code: authorizeCode,
        client_secret: client_secret,		
        client_id: process.env.SUB,			
      }),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    );

	// 애플이 발급해준 accessToken, refreshToken
    const accessToken = tokenresult.data.access_token;
    const refreshToken = tokenresult.data.refresh_token;

	// 중략...
    
    
  } catch (e) {
    res.status(400).send(`err -> ${e}`);
  }
};

2. 애플이 발급해준 refreshToken은 만료기간이 없는데 나중에 회원탈퇴를 할때 필요하므로 회원가입을 시키면서 디비에 저장한다

const axios = require("axios");
const { response } = require("express");
const { user } = require("../../models");
const fs = require("fs");
const querystring = require('querystring');
const jwt_decode = require("jwt-decode");
const jwt = require("jsonwebtoken");
const jwksClient = require("jwks-rsa");
const AuthService = require('../../service/AuthService');

module.exports = async (req, res) => {
  const { 
  authorizeCode,  // 클라이언트에서 받은 authorizeCode
  snsUserId       // 클라이언트에서 받은 애플로그인한 유저의 고유번호
  } = req.body; 

  try {
  
    // 중략...
  
    /*--------------------- 1. generate access token, refresh token -------------------------*/

    // make client_secret
    const algorithm = process.env.ALG;  // 알고리즘 : ES256
    const keyid = process.env.KID;  // [Key ID]
    const issuer = process.env.ISS;  // [팀 ID = App ID Prefix]
    const expiresIn = 15777000;         // 토큰만료시간 6개월(초),  토큰생성시간 -> jwt.sign()에 전달안해주면 현재시간으로 세팅
    const audience = "https://appleid.apple.com";
    const subject = process.env.SUB;  // [앱번들아이디]
    const authkey = fs.readFileSync(process.env.AUTHKEY, 'utf8'); // Apple Developer에서 다운로드받은 .p8파일

    const client_secret = jwt.sign(
      {},
      authkey,
      {
        algorithm: algorithm,
        keyid: keyid,
        issuer: issuer,
        audience: audience,
        subject: subject,
        expiresIn: expiresIn
      });

    const tokenresult = await axios.post(
      'https://appleid.apple.com/auth/token',
      querystring.stringify({
        grant_type: 'authorization_code',	
        code: authorizeCode,
        client_secret: client_secret,		
        client_id: process.env.SUB,			
      }),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    );

	// 애플이 발급해준 accessToken, refreshToken
    const accessToken = tokenresult.data.access_token;
    const refreshToken = tokenresult.data.refresh_token;

    // 회원가입  
    const authService = new AuthService();
    const newUser = await authService.signIn(snsUserId, snsRefreshToken);

    
    
  } catch (e) {
    res.status(400).send(`err -> ${e}`);
  }
};

3. 새로 가입한 유저의 id로 서비스의  accessToken, refreshToken을 발행해주면 백엔드 애플로그인 구현 완료!

const axios = require("axios");
const { response } = require("express");
const { user } = require("../../models");
const fs = require("fs");
const querystring = require('querystring');
const jwt_decode = require("jwt-decode");
const jwt = require("jsonwebtoken");
const jwksClient = require("jwks-rsa");
const AuthService = require('../../service/AuthService');

module.exports = async (req, res) => {
  const { 
  authorizeCode,  // 클라이언트에서 받은 authorizeCode
  snsUserId       // 클라이언트에서 받은 애플로그인한 유저의 고유번호
  } = req.body; 

  try {
  
    // 중략...
  
    /*--------------------- 1. generate access token, refresh token -------------------------*/

    // make client_secret
    const algorithm = process.env.ALG;  // 알고리즘 : ES256
    const keyid = process.env.KID;  // [Key ID]
    const issuer = process.env.ISS;  // [팀 ID = App ID Prefix]
    const expiresIn = 15777000;         // 토큰만료시간 6개월(초),  토큰생성시간 -> jwt.sign()에 전달안해주면 현재시간으로 세팅
    const audience = "https://appleid.apple.com";
    const subject = process.env.SUB;  // [앱번들아이디]
    const authkey = fs.readFileSync(process.env.AUTHKEY, 'utf8'); // Apple Developer에서 다운로드받은 .p8파일

    const client_secret = jwt.sign(
      {},
      authkey,
      {
        algorithm: algorithm,
        keyid: keyid,
        issuer: issuer,
        audience: audience,
        subject: subject,
        expiresIn: expiresIn
      });

    const tokenresult = await axios.post(
      'https://appleid.apple.com/auth/token',
      querystring.stringify({
        grant_type: 'authorization_code',	
        code: authorizeCode,
        client_secret: client_secret,		
        client_id: process.env.SUB,			
      }),
      {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
      },
    );

	// 애플이 발급해준 accessToken, refreshToken
    const accessToken = tokenresult.data.access_token;
    const refreshToken = tokenresult.data.refresh_token;

    // 회원가입  
    const authService = new AuthService();
    const newUser = await authService.signIn(snsUserId, snsRefreshToken);

    // jwtAccessToken, jwtRefreshToken 발급
    const accessToken = authService.generateAccessToken(newUser.id);
    const refreshToken = authService.generateRefreshToken();

    res.status(200).json({
      "accessToken": accessToken,
      "refreshToken": refreshToken,
    });

    
  } catch (e) {
    res.status(400).send(`err -> ${e}`);
  }
};

---

마무리

• 클라이언트(ios)는 백엔드가 보낸 accessToken과 refreshToken을  내부에 저장하고 있다가 서비스 api호출할때마다 header에 넣어줘서 사용하면 된다
• accessToken이 만료되어 401에러를 보낸다면 클라이언트는 가지고 있는 refreshToken으로 accessToken 재발행!
• 로그아웃처리는 클라이언트에서 내부에 가지고 있는 accessToken과 refreshToken을 모두 만료시키거나 삭제하는걸로 구현하면된다!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고자료

https://developer.apple.com/documentation/sign_in_with_apple/generate_and_validate_tokens

https://tlog.tammolo.com/posts/apple-login-02

https://developer111.tistory.com/58

https://hwannny.tistory.com/71