애플로 로그인 (자바스크립트, 스프링) 완벽파헤치기[1]편에 이어 오늘은 [2]편
프론트엔드 작업을 해보겠습니다.
아직 1편을 안보고 오신 분들은
1편을 참고하고 와주세요.
<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"> <!-- 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>
위의 양식을 애플로 로그인을 구현할 페이지에 넣어주면 됩니다.
<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div> 코드가
애플로 로그인 버튼을 나타냅니다.
적절한 위치에 넣어주시고 디자인은 커스터마이징 할 수 있으며 애플의 가이드라인에 맞춰서 진행하면 됩니다.
<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 //or false defaults to false
});
</script>
</body>
</html>
메타 태그를 작성하지 않고 스크립트를 통해서도 설정할 수 있습니다.
위의 두 코드 예시는 서로 같게 작용합니다.
ClientID에는 serviceID를 등록할때 사용했던 Identifer를 사용해주시고,
scope는 애플로부터 받아올 정보인데 name과 email을 받아올 수 있습니다.
둘다 받아오려면 공백을 이용해 name email 이런식으로 적어주면 됩니다.
redirctURI 는 애플개발자센터에서 설정했던 콜백URI를 적어주세요.
state는 csrf 공격을 완화하기 위한 oAuth파라미터입니다.
어떤 문자가 들어가도 상관없지만 다른사람이 못 알아보도록 유니크한 값으로 넣어주세요.
usePopup은 optional로 선택사항이며 default 값은 false입니다.
이렇게 설정했다면 이제 콜백url페이지를 설정하겠습니다.
콜백url은 우선 간단하게
document.addEventListener('AppleIDSignInOnSuccess', (data) => {
//handle successful response
});
//Listen for authorization failures
document.addEventListener('AppleIDSignInOnFailure', (error) => {
//handle error.
});
위의 코드를 입력해주면 로그인이 성공했는지 실패했는지 처리할 수 있습니다.
이렇게 하면 언뜻 다 끝난거 같지만
이제부터가 진짜 시작입니다.
사실 여기까지는 그냥 테스트용이라고 생각하면 됩니다.
자 한번 진짜 테스트를 해보겠습니다.
애플로 로그인 버튼을 눌러 로그인을 시도해보세요.
로그인이 정상적으로 되셨다면 콜백 url로 페이지가 이동될것입니다.
그런다음 개발자 도구를 열어 Network창을 열어보세요.
Name의 목록을 보면 나의 콜백url이 있을것입니다. 콜백url을 클릭하면
애플에서 post로 보낸 데이터를 볼 수 있을 것입니다.
위처럼 state code id_token 세개의 목록을 볼수 있을텐데요.
이 값들을 백엔드에서 암호를 풀고 애플서버와 인증과 검증과정을 거쳐야합니다.
저는 스프링프레임워크를 사용하니
@RequestMapping(value="loginCallBackApple")
public String appleLoginCallBack(@RequestBody String appleData) throws UnsupportedEncodingException {
logger.warn(appleData);
return forward("member/appleLoginCallBack");
}
이런식으로 사용하면 위의 데이터값을 출력할수 있는데요.
이후의 작업은 다음 편에서 계속 진행하도록 하겠습니다.
출처
Apple Developer Documentation
developer.apple.com
'모바일' 카테고리의 다른 글
| [xcode] 앱스토어 재출시 하는 방법(재배포, 버전 업그레이드) (0) | 2021.06.04 |
|---|---|
| 애플로 로그인 (자바스크립트, 스프링) 완벽파헤치기[3] (8) | 2021.04.30 |
| 애플로 로그인 (자바스크립트, 스프링) 완벽파헤치기[1] (0) | 2021.04.26 |
| [iOS] 푸시알림 APN 링크 받아서 링크주소로 웹뷰 이동하기 (13) | 2021.03.03 |
| [IOS Swift] WKWebView에서 모바일 사파리 새창으로 이동 링크 막기 (0) | 2021.02.26 |
