애플 로그인 추가하기

21445 단어 SignInWithAppleSignInWithApple

참고 블로그
https://sarunw.com/posts/sign-in-with-apple-1/

capability

  1. app target > Signing & Capabilities 탭 > + Capability 클릭하기 > "Sign in with Apple".

애플 디벨로퍼에서 앱 identifiers 가니까 Sign in with Apple이 체크되어 있다!!!

Token Verification

그 전에

single sign-on 흐름 살펴보기

  • Client

    1. Users directed to provider, e.g., Facebook, Twitter, Apple 사용자가 공급자(예: Facebook, Twitter, Apple)를 가리킴
    2. Users grant/deny permissions that application requested 사용자가 응용 프로그램에서 요청한 권한 부여/거부
    3. Provider direct users back to the application along with token 토큰과 함께 사용자를 애플리케이션으로 다시 안내하는 공급자
    4. The application then uses this token to sign in (or create an account) 그러면 응용 프로그램은 이 토큰을 사용하여 로그인(또는 계정 만들기)합니다.

  • Backend

    1. Use the token from the client to retrieve information from the provider, e.g., id, email
      Use that information sign in (or create an account if this is the first time) 클라이언트의 토큰을 사용하여 공급자로부터 정보(예: ID, 전자 메일) 검색합니다
      해당 정보 로그인 사용(또는 처음인 경우 계정 생성)합니다
    2. For Sign in with Apple, the backend steps are a little bit different but serve the same purpose. What you get after authenticate is JSON Web Tokens(JWT)[1]. It contains most of the data you need in the payload part, so you don't need to make another request for that information. The only thing we need to do is verify that the payload wasn't changed along the way. 인증확인 후 얻을 수 있는 것은 JSON 웹 토큰(JWT)[1]입니다. 페이로드 부분에 필요한 대부분의 데이터가 포함되어 있기 때문에 해당 정보를 추가로 요청할 필요가 없습니다. 우리가 해야 할 일은 도중에 페이로드가 바뀌지 않았는지 확인하는 것뿐이에요.

  • Client

    1. Users directed to Apple for Android and Web. Users presented with a sign-in dialog for iOS
      iOS용 로그인 대화 상자로 이동하기
    2. Users grant/deny permissions that application requested 사용자가 응용 프로그램에서 요청한 권한 부여/거부
    3. Apple directs users back to the application along with token. The delegate (authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization)) get called with JWT (.identityToken) 애플은 사용자를 토큰과 함께 애플리케이션으로 다시 안내한다.
    4. Application send this JWT to the application server 응용 프로그램에서 이 JWT를 응용 프로그램 서버로 보냅니다.

  • Backend

    1. Verify JWT
      Use that information sign in (or create an account if this is the first time)

서명을 확인하기 위해 public key가 필요하다(private key로 서명된 token을 사용하기 전에)

public key 가져오기
GET https://appleid.apple.com/auth/keys
https://developer.apple.com/documentation/sign_in_with_apple/fetch_apple_s_public_key_for_verifying_token_signature

  1. 애플 디벨로퍼로 가서
    identifiers > Services IDs >


예를들어 도메인이 naver.com 이고 앱네입이 myApp이면 com.naver.myApp 이라고 적어주시면 됩니다.

등록 후 들어가서


Domains and SubDomains에는 사용할 웹사이트의 도메인을 넣어주세요.
예를들어 naver.com이고 서브 도메인이 www.naver.com과 과 m.naver.com이 있으면
naver.com,www.naver.com,m.naver.com 이렇게 쉼표로 구분하여 적어주세요.

Return URLs 에는 콜백 url을 적어줍니다.
서버에서 콜백을 처리할 url이 있어야 겠죠.
이 칸에는 프로토콜까지 적어야합니다.
예를들어,
https://naver.com/appleLoginCallback,https://www.naver.com/appleLoginCallback,https://m.naver.com/appleLoginCallback

  1. key 생성하기

(참고)
https://developer111.tistory.com/56?category=948844

프론트에 버튼 생성하기

Displaying Sign in with Apple Buttons on the Web
웹에서 애플로 로그인하기 버튼 보여주기
https://developer.apple.com/documentation/sign_in_with_apple/displaying_sign_in_with_apple_buttons_on_the_web

앱에서 자바스크립트를 주입해서 해야할 거 같다

<html>
    <head>
        <meta name="appleid-signin-client-id" content="[CLIENT_ID]">
        <meta name="appleid-signin-scope" content="[SCOPES]">
        <meta name="appleid-signin-redirect-uri" content="[REDIRECT_URI]">
        <meta name="appleid-signin-state" content="[STATE]">
    </head>
    <style>
        .signin-button {
            width: 210px;
            height: 40px;
        }
    </style>
    <body>
        <div id="appleid-signin" class="signin-button" data-color="black" data-border="true" data-type="sign-in"></div>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    </body>
</html>

이런식으로 만들고 싶으므로...아래와 같이 코드를 조금 변경했다

<div id="appleid-signin" class="signin-button" data-mode="logo-only" data-type="sign-in" data-border-radius="50">

그런데... HIG를 지켜야 한다구?
https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
웹에서 띄우는 거니까 상관없지 않을까...???

버튼 다운받기
https://appleid.apple.com/signinwithapple/button

상동 코드

<li>
	<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
	<div id="appleid-signin" class="signin-button" data-mode="logo-only" data-color="black" data-border="true" data-type="sign in" data-border-radius="50"></div>
	<script type="text/javascript">
		AppleID.auth.init({
			clientId : '[서비스아이디]',
			scope : 'name email',
			redirectURI: '[리다이렉트 url]',
			state : 'signin',	//csrf, php의 openssl_random_pseudo_bytes
			nonce: '[NONCE]',	//??뭔지 모르겠는디??
			usePopup: true	// or false defaults to false
		});
	</script>
</li>

상동 코드

<a href="https://appleid.apple.com/auth/authorize?client_id=[CLIENT_ID]&redirect_uri=[REDIRECT_URL]&response_type=code id_token&state=[STATE]&scope=[SCOPES]&response_mode=form_post">Sign In with Apple</a>

테스트해보기

이제 위에서 생성한 버튼을 누르면
아래처럼 애플로 로그인하기 화면이 나오고

정보를 입력한뒤

  1. 간단한 콜백 url 체크

    //handle successful response 
document.addEventListener('AppleIDSignInOnSuccess', (data) => {
   alert("성공");
});
//Listen for authorization failures
document.addEventListener('AppleIDSignInOnFailure', (error) => {
   alert("실패");
});

  2. 개발자도구에서 네트워크 체크
    입력했던 redirect url로 이동하는지
    네트워크 탭에서 확인한다

  1. state랑 id_token이랑 code가 맞는지 백에서 확인해주기
    The default response_type for Authentication Request generated from Apple JS is code id_token, so we would get state, id_token, and code along with user in the response.

세부 설명
https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/incorporating_sign_in_with_apple_into_other_platforms#3332113

  • code
    A single-use authorization code that’s valid for five minutes. 5분동안 유효한 일회성 인증 코드

  • id_token
    A JSON web token containing the user’s identity information. 사용자 분류 정보를 담은 JSON 웹 토큰

  • state
    The state contained in the Authorize URL. 인증된 URL을 포함

  • user
    A JSON string containing the data requested in the scope property. The returned data is in the following format: { "name": { "firstName": string, "lastName": string }, "email": string } 성, 이름, 이메일 정보

  • error 에러
    The returned error code.

4.2 차후 애플 로그인 시

user json은 더 이상 전달되지 않는다.

user object를 테스트하기 위해서는, 해당 사이트에서의 Apple ID 사용을 정지처리 해야한다.

https://appleid.apple.com/ 들어가서 로그인한 뒤

iPhone:
You can do that by removing the permission in
Settings > Apple ID > Password & Security > Apple ID Logins/App Using Your Apple ID > Your app name > Stop using Apple ID

Website:
You can also manage this on website by visit your
Apple ID > click Manage Apps & websites using Apple ID under Security section > Your app name > Stop using Apple ID

php 서버에서 처리하기

1. login페이지에서 jwt 생성하기

2. log in with apple으로 redirectURL로 redirect 하고 거기에서 코드 비교한 뒤 성공/실패 값 보여주기

3. 성공/실패에 따라 자바스크립트로 처리하기

(참고)
https://s-yeonjuu.tistory.com/43
https://developer.apple.com/documentation/sign_in_with_apple/displaying_sign_in_with_apple_buttons_on_the_web
https://developer111.tistory.com/56?category=948844
https://sarunw.com/posts/sign-in-with-apple-4/#embed-sign-in-with-apple-js-in-your-webpage

https://twih1203.medium.com/%EC%95%A0%ED%94%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-2-c5ce5ada2b1f
https://bigexecution.tistory.com/69
https://sarunw.com/posts/sign-in-with-apple-4/#size
https://programmar.tistory.com/43?category=721123
https://developer.okta.com/blog/2019/06/04/what-the-heck-is-sign-in-with-apple

전화번호부 - 상속과 다형성 이용
[node.js] 글목록 출력하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage