この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
さて、WWDC19のキーノートで Sign In with Apple が発表されましたね！これで Apple ID を持っている人であればiOSデバイスから簡単にログインできるようになります。
もっとも重要なポイントは 個人のiPhoneであれば、まず間違いなくログイン状態である という点です。新しいアプリを提供する際に、ログインのステップをシンプルにしつつ、認証されている状態を作れるというわけです。
アプリへの実装
AuthenticationServices フレームワークを使用します。
サンプルコードが提供されているので、そこから実装方法が把握できます。
概ね以下のような感じです。簡単ですね！
import AuthenticationServices
class LoginViewController: UIViewController {
// ログイン画面を表示
@objc
func handleAuthorizationAppleIDButtonPress() {
let appleIDProvider = ASAuthorizationAppleIDProvider()
let request = appleIDProvider.createRequest()
request.requestedScopes = [.fullName, .email]
let authorizationController = ASAuthorizationController(authorizationRequests: [request])
authorizationController.delegate = self
authorizationController.presentationContextProvider = self
authorizationController.performRequests()
}
// PresentationContextProviderを実装
extension LoginViewController: ASAuthorizationControllerPresentationContextProviding {
func presentationAnchor(for controller: ASAuthorizationController) -> ASPresentationAnchor {
return self.view.window!
}
}
// Delegateでログイン後のトークンを取得
extension LoginViewController: ASAuthorizationControllerDelegate {
func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
if let appleIDCredential = authorization.credential as? ASAuthorizationAppleIDCredential {
}
}
}Webページ、Webアプリへの実装
Webページへの実装も非常に簡単です。
こんな感じで実装します。ClientId などは meta タグに入れる方法と、JSで記述する方法の2種類が提供されています。
<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>
<button id="sign-in-with-apple-button"> Sign In with Apple </button>
<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
<script type="text/javascript">
const buttonElement = document.getElementById('sign-in-with-apple-button');
buttonElement.addEventListener('click', () => {
AppleID.auth.signIn();
});
</script>
</body>
</html>デザインガイドライン
Sign In with Appleボタンを設置するには、ボタンのデザインをガイドライン通りのデザインに準拠している必要があります。Apple Payボタンなどと同様ですね。
登場が待ち遠しい！
Sign In with Appleを使って、超絶簡単なログイン機能を導入できるようになることがとにかく待ち遠しいですね！
シングルサインオンなどもできそうなので、Auth0やCognito User Poolsなどとの組み合わせもできそうですね。
関連情報
- Sign In with Apple - Apple Developer
- Getting Started - Sign in with Apple - Apple Developer
- Sign In with Apple - Sign In with Apple - Human Interface Guidelines - Apple Developer
- App Store Review Guidelines - Apple Developer
- Terms and Conditions - Apple Developer
- Adding the Sign In with Apple Flow to Your App | Apple Developer Documentation
- AuthenticationServices
- Sign In with Apple REST API | Apple Developer Documentation
- Introducing Sign In with Apple - WWDC 2019 - Videos - Apple Developer
16
