iOS 跨平台帳號密碼統合｜Sign in with Apple 以上のログイン強化法

閲覧数: 2,280+

正體中文 简体中文 English 日本語

本記事は AI による翻訳をもとに作成されています。表現が不自然な箇所がありましたら、ぜひコメントでお知らせください。

記事一覧

---

iOS クロスプラットフォームのアカウント・パスワード統合、ログイン体験の向上

Sign in with Apple に加えて導入すべき機能

写真提供：Dan Nelson

機能

同時にウェブサイトとアプリを提供しているサービスで最もよくある問題は、ユーザーがウェブサイトで登録・ログインしパスワードを保存しているにもかかわらず、アプリをインストールして開くと、ログイン時に再度アカウントとパスワードを入力しなければならず非常に不便であることです。この機能は、既に端末に保存されているアカウント情報をウェブサイトと関連付けられたアプリに自動で入力し、ユーザーのログインプロセスを高速化します。

効果図

余計な説明はなしで、まず完成した画面をお見せします；一見すると iOS ≥ 11 の Password AutoFill 機能のように見えるかもしれません；しかしよく見ると、キーボードは表示されておらず、「保存済みのパスワードを選択」ボタンを押して初めてアカウントとパスワードの選択ウィンドウが表示されます。

Password AutoFill に触れたので、まずは少し引っ張って、Password AutoFill の紹介と設定方法から始めましょう！

パスワード自動入力

サポート範囲：iOS ≥ 11

現在はもう iOS 14 なので、この機能は非常に一般的で特に珍しいものではありません。APP 内のアカウント・パスワードのログイン画面でキーボードを呼び出すと、ウェブ版サービスのアカウント・パスワードを素早く選択でき、選択すると自動で入力されてすぐにログインできます！

では、APPとWebはどのように認識し合うのでしょうか？

Associated Domains！APP内でAssociated Domainsを指定し、ウェブサイトにapple-app-site-associationファイルをアップロードすると、両者が認識し合えます。

1. プロジェクト設定の「Signing & Capabilities」-> 左上の「+ Capabilities」->「Associated Domains」

webcredentials:あなたのサイトのドメイン を追加します（例：webcredentials:google.com）。

2. Apple開発者アカウント にログインする

「 Membership 」タブで「 Team ID 」を記録します

3.「Certificates, Identifiers & Profiles」→「Identifiers」→ プロジェクトを見つける → 「Associated Domains」機能を有効化

APP 側の設定が完了しました！

4.Webサイト側の設定

「apple-app-site-association」という名前のファイル（拡張子なし）を作成し、テキストエディタで開いて、以下の内容を入力してください：

{
  "webcredentials": {
    "apps": [
      "TeamID.BundleId"
    ]
  }
}

TeamID.BundleId をあなたのプロジェクト設定に置き換えてください（例：TeamID = ABCD 、BundleID = li.zhgchg.demoapp => ABCD.li.zhgchg.demoapp）

このファイルをウェブサイトの ルートディレクトリ または /.well-known ディレクトリにアップロードしてください。例えば、あなたの webcredentials サイトドメイン が google.com の場合、このファイルは google.com/apple-app-site-association または google.com/.well-known/apple-app-site-association にアクセス可能である必要があります。

補足：サブドメイン

公式ドキュメントからの抜粋ですが、サブドメインの場合はすべて Associated Domains に記載する必要があります。

Web 側の設定が完了しました！

補足：applinks

ここで発見したのは、universal link の applinks を設定していれば、webcredentials を追加しなくても効果があるということです。しかし、後の問題を避けるために、ドキュメント通りに設定しましょう。

プログラムに戻る

Code 部分、TextField を以下のように設定するだけで十分です：

usernameTextField.textContentType = .username
passwordTextField.textContentType = .password

新規登録の場合、パスワード確認欄には以下を使用できます：

repeatPasswordTextField.textContentType = .newPassword

この時点で再度 Build & Run した後、アカウント入力時にキーボード上部に同じサイトで保存されたパスワードの候補が表示されます。

完了！

表示されませんか？

自動入力パスワード機能がオフになっている可能性があります（シミュレーターのデフォルトはオフです）。「設定」->「パスワード」->「自動入力パスワード」->「自動入力パスワード」をオンにしてください。

あるいは、そのウェブサイトに既存のパスワードがない場合でも、「設定」->「パスワード」-> 右上の「+ 新規追加」-> で追加できます。

本題に入る

前菜のPassword AutoFillの紹介が終わったら、次に本題に入ります；効果図のような効果をどのように実現するか。

Shared Web Credentials

iOS 8.0 から始まりましたが、以前はあまり APP で使われていませんでした。Password AutoFill が登場する前から、この API を使ってウェブサイトのアカウント情報を統合し、ユーザーが素早く選択できるようにしていました。

Shared Web Credentials は、アカウントとパスワードの読み取りだけでなく、新規追加、既存のアカウントとパスワードの編集、削除も可能です。

設定

⚠️ 設定部分は前述の Password AutoFill 設定と同様に Associated Domains を正しく設定してください。

つまり、Password AutoFill 機能の強化版と言えます！！

同様に、まず Password AutoFill に必要な環境を整えてからこの「高度な」機能を使用する必要があります。

読み取り

使用 SecRequestSharedWebCredential メソッドで操作を行う場合：

SecRequestSharedWebCredential(nil, nil) { (credentials, error) in
  guard error == nil else {
    DispatchQueue.main.async {
      //エラーを表示する
    }
    return
  }
  
  guard CFArrayGetCount(credentials) > 0,
    let dict = unsafeBitCast(CFArrayGetValueAtIndex(credentials, 0), to: CFDictionary.self) as? Dictionary<String, String>,
    let account = dict[kSecAttrAccount as String],
    let password = dict[kSecSharedPassword as String] else {
      DispatchQueue.main.async {
        //エラーを表示する
      }
      return
    }
    
    DispatchQueue.main.async {
      //アカウントとパスワードをテキストフィールドに入力する
    }
}

SecRequestSharedWebCredential(fqdn, account, completionHandler)

• fqdn 複数の webcredentials ドメインがある場合、特定のものを指定するか、null を使って指定しないことも可能です。

• account 指定するアカウントを検索する場合に使用し、null を指定すると未指定になります

効果図。（最初の効果図と異なることに気づいたかもしれません）

⚠️ この読み取り方法は iOS 14 で非推奨となりました！

⚠️ この読み取り方法は iOS 14 で非推奨になりました！

⚠️ この読み取り方法は iOS 14 で非推奨になりました！

"ASAuthorizationController を使って ASAuthorizationPasswordRequest を作成する（AuthenticationServices フレームワーク）"

この方法は iOS 8 から iOS 14 までにのみ適用され、iOS 13 以降は Sign in with Apple と同じ API である「AuthenticationServices」を使用できます。

AuthenticationServices の読み取り方法

対応バージョン iOS ≥ 13

import AuthenticationServices

class ViewController: UIViewController {
  override func viewDidLoad() {
      super.viewDidLoad()
      //...
      let request: ASAuthorizationPasswordRequest = ASAuthorizationPasswordProvider().createRequest()
      let controller = ASAuthorizationController(authorizationRequests: [request])
      controller.delegate = self
      controller.performRequests()
      //...
  }
}

extension ViewController: ASAuthorizationControllerDelegate {
    func authorizationController(controller: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
        
        if let credential = authorization.credential as? ASPasswordCredential {
          // credential.user、credential.passwordをテキストフィールドに入力する
        }
        // else if as? ASAuthorizationAppleIDCredential... Sign in with Apple
    }
    func authorizationController(controller: ASAuthorizationController, didCompleteWithError error: Error) {
        // エラーをアラート表示する
    }
}

効果図では、新しい方法がフローや表示面で Sign in with Apple とより良く統合できることがわかります。

⚠️ このログインは Sign in with Apple（これは別のものです） の代わりにはなりません。

アカウント情報を「パスワード」に書き込む

Deprecated となったのは読み取り部分のみで、新規追加、削除、編集の部分は従来通り使用可能です。

追加、削除、編集の部分は SecAddSharedWebCredential を使って操作します。

SecAddSharedWebCredential(domain as CFString, account as CFString, password as CFString?) { (error) in
  DispatchQueue.main.async {
    guard error == nil else {
      // エラーを通知
      return
    }
    // 成功を通知
  }
}

SecAddSharedWebCredential(fqdn, account, password, completionHandler)

• fqdn は保存するドメインを自由に指定できます。必ずしも webcredentials 内である必要はありません。

• account は追加、変更、削除するアカウントを指定します。

• 削除する場合は password に nil を渡します。

• 処理ロジック：

  • account が存在し、password が入力されている場合 = password を変更する
  • account が存在し、password が nil の場合 = domain から account と password を削除する
  • account が存在せず、password が入力されている場合 = domain に account と password を追加する

⚠️ また、バックグラウンドで勝手に変更されるわけではなく、変更するたびに確認ダイアログが表示され、ユーザーが「パスワードを更新」を押して初めてデータが変更されます。

パスワードジェネレーター

最後の小さな機能、パスワードジェネレーター。

SecCreateSharedWebCredentialPassword() を使用して操作します。

let password = SecCreateSharedWebCredentialPassword() as String? ?? ""
// 共有ウェブ資格情報のパスワードを作成

生成器が作成するパスワードは、英大文字・小文字と数字で構成され、「-」で区切られています（例: Jpn-4t2-gaF-dYk）。

完全なテストプロジェクトのダウンロード

不満点

もしサードパーティのパスワード管理ツール（例：onepass、lastpass）を使用している場合、キーボードのPassword AutoFillでは表示および入力が可能ですが、AuthenticationServicesやSecRequestSharedWebCredentialでは表示されないことがあります。この要件を満たす方法があるかは不明です。

終わり

ご覧いただきありがとうございます。また、saiday さんと街声に、この機能を教えていただき感謝します XD。

さらに XCode ≥ 12.5 のシミュレーターに録画機能が追加され、GIF保存にも対応していてとても便利です！

シミュレーターで「Command」+「R」を押して録画を開始し、赤い点をクリックして録画を停止します。右下に表示されるプレビュー画像を「右クリック」→「Save as Animated GIF」でGIFとして保存し、そのまま記事内に貼り付けられます！

ご質問やご意見がございましたら、こちらからご連絡ください 。

Post は Medium から ZMediumToMarkdown によって変換されました。

---

🍺 Buy me a beer on PayPal

👉👉👉 Follow Me On Medium! (1,053+ Followers) 👈👈👈

本記事は Medium にて初公開されました（こちらからオリジナル版を確認）。ZMediumToMarkdown による自動変換・同期技術を使用しています。

Improve this page on Github.