gn In with Apple을 웹에 구현 - 샘플 코드
여기에서는 Sign In with Apple JS를 사용한 샘플 코드에 대해 설명합니다.
Sign In with Apple을 사용하기 위해 필요한 설정 등은 여기에서 해설하고 있으므로, 꼭 봐 주세요.
Sign In with Apple을 웹에 구현 – Apple Developer에서 설정
샘플 코드
Configuring Your Webpage for Sign In with Apple 에 있는 샘플 코드는 이쪽이 됩니다.
signinwithapple.html<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>
<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/ja_JP/appleid.auth.js"></script>
<!-- 英語(US)版 <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script> -->
</body>
</html>
혹시 JS 의 일본어판도 있는 것은… 라고 생각했습니다만, 본 기사 집필 시점에서는 확인할 수 없었습니다.
동작 이미지
appleid-signin 유형
data-color
black 또는 white의 두 종류. 버튼의 스타일을 지정합니다.
data-border
ture 또는 false . 버튼에 테두리 라인을 붙일지 어떨지.
data-type
버튼의 타입을 지정. 본 기사 작성 시점에서
<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>
<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/ja_JP/appleid.auth.js"></script>
<!-- 英語(US)版 <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script> -->
</body>
</html>
data-color
black 또는 white의 두 종류. 버튼의 스타일을 지정합니다.data-border
ture 또는 false . 버튼에 테두리 라인을 붙일지 어떨지.data-type
버튼의 타입을 지정. 본 기사 작성 시점에서
sign in sign up continue apple 4 종류.
data-type이미지sign in sign up 
continue 
apple 
매개변수
[CLIENT_ID]
Certificates, Identifiers & Profiles에서 만든 Services ID의 Identifier.
[SCOPES]
범위. 예 : email
[REDIRECT_URI]
Certificates, Identifiers & Profiles 에서 만든 Services ID로 Web Authentication Configuration의 Return URL에 추가된 URL 중 하나입니다.
[STATE]
CSRF 대책을 위한 값을 입력.
Reference
이 문제에 관하여(gn In with Apple을 웹에 구현 - 샘플 코드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/treastrain/items/c1f04c1fc757c92d4bf3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(gn In with Apple을 웹에 구현 - 샘플 코드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/treastrain/items/c1f04c1fc757c92d4bf3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
