Jiwift

[Web] Sign in with Apple 웹, 애플 로그인 간단하게 알아보기 html, js 사용 본문

다른 개발/기타

[Web] Sign in with Apple 웹, 애플 로그인 간단하게 알아보기 html, js 사용

지위프트 2024. 1. 5. 17:57
반응형

 아주 간단하게 javascript를 통해서 띄우는 방법입니다. 각각 환경에 맞게 변경이 필요할 것 같습니다. 

 

<html>

<head>
    <!-- 애플 로그인 Meta -->
    <meta name="appleid-signin-client-id" content="서비스 Identifier">
    <meta name="appleid-signin-scope" content="name email">
    <meta name="appleid-signin-redirect-uri" content="리다이렉트 URL">
    <meta name="appleid-signin-state" content="[STATE]">
    <meta name="appleid-signin-nonce" content="[NONCE]">
    <meta name="appleid-signin-use-popup" content="false"> <!-- or false defaults to false -->
</head>

<body>
    <!-- 애플 로그인 버튼 -->
    <div id="appleid-signin" 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>

 

 위 코드를 사용하면 무조건 버튼이 하나 생성되게 됩니다. 그리고 웹페이지가 열리게되는데, 부족한 부분이 있으면 에러 코드가 발생합니다. index.html 파일 하나 생성해서 안에 코드를 붙여넣고 실행해보세요.

 

appleid-signin-client-id

 로그인 서비스를 위해 생성된 Service Identifier를 입력해야합니다. 애플 개발자 ID가 필요하며 개발자 센터에서 가능합니다.

 

appleid-signin-scope

요청할 Scope 이름(name)과 이메일(email). 띄어쓰기를 기준으로 구별하며 필요한 것만 입력하고, 둘다 필요하면 위 코드 예제처럼 "name email"하면 됩니다.

 

appleid-signin-redirect-uri

 결과를 받아야하는 URL입니다. public access가 가능해야 하고, 외부 접속이 차단된 사이트에서는 애플 로그인 처리되지 않는다고 합니다. Services id 등록하는 과정에서 등록 수정이 가능합니다.

 

appleid-signin-state

 애플리케이션에서 생성한 고유한 문자열, 보안을 강화하는 데 사용합니다. 이 문자열은 사용자가 로그인을 시작한 후에 'redirectURI'에 전달됩니다. 애플리케이션은 이 문자열을 검증하여 요청이 변경되지 않았음을 확인할 수 있습니다. key같은 기능을 하는 것 같습니다.

 

appleid-signin-nonce

 사용자가 'Sign in with Apple' 버튼을 클릭하면, 애플리케이션은 nonce 값을 생성하고 이를 Apple에 전달합니다. Apple은 이 nonce 값을 사용자의 세션에 연결하고, 사용자가 인증을 완료하면 이 nonce 값을 리디렉션 URL의 일부로 반환합니다. 애플리케이션은 이 nonce 값을 검증하여 요청이 변경되지 않았음을 확인할 수 있습니다.

 

appleid-signin-use-popup

 로그인 화면을 팝업으로 보여줄지 페이지 이동을해서 보여줄지 결정하는 것입니다. true인 경우 새로운 화면이 열리게되고, false인 경우는 페이지 이동이 이루어집니다.

 

 

 

참고

JavaScript] 웹에서 Apple Login 구성하기 (tistory.com)

 

JavaScript] 웹에서 Apple Login 구성하기

Apple Developer Documentation : https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js/configuring_your_webpage_for_sign_in_with_apple 참조 : https://sarunw.com/posts/sign-in-with-apple-4/ 1. Apple Developer 에 로그인 http

bigexecution.tistory.com

 

React 웹에 Sign in With Apple 도입하기 (velog.io)

 

React 웹에 Sign in With Apple 도입하기

React 웹에 애플 계정으로 로그인하는 기능을 추가해봅시다.

velog.io

 

반응형

'다른 개발 > 기타' 카테고리의 다른 글

Claude를 사용한 Mac OS App - 로또 당첨 조회 앱  (0) 2025.01.16
[Github] 오픈소스 기여하기, Contributor  (0) 2024.01.06
[Open API] 카카오(다음) 주소 검색 API 사용  (0) 2023.12.07
[Node] FCM Topic(주제)을 이용한 Push Notification 메세지 전송 feat. mutable-content  (0) 2023.06.16
RBPN - Recurrent Back-Projection Network for video Super-Resolution  (0) 2022.12.31
'다른 개발/기타' Related Articles more