Configuring your webpage for Sign in with Apple
당신의 웹페이지가 유저를 애플로 로그인을 통해 authorize하도록 준비하십시오.
개요
당신은 HTML, JavaScript를 쓸 수 있다. 애플로 로그인을 당신의 웹페이지에 추가하기 위해. authorization 객체를 설정하고 버튼을 추가하십시오. 유저가 당신의 웹페이지에서 유저의 Apple ID로 로그인할 수 있도록 하는 버튼을.
애플로 로그인 임베드
Include the script tag and link to Apple’s hosted version of the Sign in with Apple JS framework in your web page:
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>Embedding the framework gives you access to the Sign in with Apple authorization features.
Authorization 객체 설정
빠르게 시작하기 위해서 애플로 로그인을 설정하세요. 기본 마크업 셋업으로. 아니면, JavaScript를 쓰십시오. authorization 객체를 설정하기 위해. 아니면 둘을 조합하여 쓰십시오.
Configure the authorization object using only markup by setting the meta tags in the header section and displaying a Sign in with Apple button. For more information about the client configuration, see ClientConfigI.
<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]">
<meta name="appleid-signin-nonce" content="[NONCE]">
<meta name="appleid-signin-use-popup" content="true">
</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>
당신은 authorization 객체를 JavaScript API를 사용하여 설정할 수도 있습니다. 그리고 애플로 로그인 버튼을 보여줄 수 있습니다.
<html>
<head>
</head>
<body>
<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" data-color="black" data-border="true" data-type="sign in"></div>
<script type="text/javascript">
AppleID.auth.init({
clientId : '[CLIENT_ID]',
scope : '[SCOPES]',
redirectURI : '[REDIRECT_URI]',
state : '[STATE]',
nonce : '[NONCE]',
usePopup : true
});
</script>
</body>
</html>추가로 당신은 두 설정 옵션을 결합할 수 있습니다. 당신은 meta tag를 세팅할 수 있습니다. JavaScript API를 쓰는 동시에. 이 설정은 제공합니다. 기본 구현을. 메타 태그를 통해서. 그러나 당신이 최초 정보를 override할 수도 있습니다. JavaScript API를 사용함으로써.
Authorization 응답 핸들링
유저가 애플로 로그인 버튼을 클릭한 후, 프레임워크는 authorization 정보를 애플로 보냅니다. 애플은 authorization 요청을 가공하고 HTTP POST 요청을 보냅니다. authorization의 결과를 담고있는. redirectURI.에서 제공된 URL로. HTTP 바디는 담고있습니다. 결과 패러미터들을. application/x-www-form-urlencoded content-type으로. 성공적인 응답은 이하 parameter들을 담고 있습니다.
code
한곳에만 쓰이는 ahtentication 코드. 5분 뒤에 만료되는. 유저 토큰을 얻기 위해 이 코드를 어떻게 validate하는지를 배우려면 이걸 보세요. Generate and validate tokens.
id_token
JSON 웹 토큰(JWT). 유저의 식별 정보를 담고있는. 더 많은 정보를 보려면 이걸 보세요. Retrieve the user’s information from Apple ID servers.
state
임의의 string. init 함수로 인해 들어온. authorization 요청의 현재 state를 보여준다. 이 값은 cross-site request forgery 공격을 완화시키는데에도 쓰인다. authorization 응답 안에 있는 state 값과 비교함으로써.
user
JSON string. scope 프로퍼티 안에서 요청된 데이터를 담고있는. 반환된 데이터는 다음의 형식이다. { "name": { "firstName": string, "lastName": string }, "email": string }
중요한 것.
애플은 유저가 앱을 처음으로 authorize했을 때 단 한번만 user 객체를 반환합니다. 이 정보를 Validate하고 유지하십시오. 당신의 앱에서 당신의 서버로. 후속 authorization 요청은 user 객체를 담고있지 않습니다. 그러나 유저의 이메일이 제공된다. 모든 요청을 위한 identity 토큰 안에. 이걸 보세요. Authenticating users with Sign in with Apple.
에러가 발생한다면 HTTP 바디는 담고 있다. 다음의 parameter를
error
반환된 error 코드
state
임의의 string. init 함수로 인해 들어온. authorization 요청의 현재 state를 보여준다. 이 값은 cross-site request forgery 공격을 완화시키는데에도 쓰인다. authorization 응답 안에 있는 state 값과 비교함으로써.
현재로써 반환되는 유일한 에러코드는 user_cancelled_authorize이다. 프레임워크는 이 에러코드를 유저가 cancel 버튼을 클릭했을 때 반환한다.
당신이 pop-up 옵션을 쓸 때는... 다음에 계속...
'웹' 카테고리의 다른 글
| allow "*"를 했는데도 CORS 에러 뜰 때, 새로고침 해야 CORS 에러 안 뜰 때 (0) | 2023.06.01 |
|---|---|
| Sign in with Apple JS에 대하여 (0) | 2022.12.29 |
| 애플 로그인 OAuth에 대하여 (0) | 2022.12.29 |
| OAuth에 대하여 (0) | 2022.12.29 |
