如何在SwiftUI的AWS Amplify Authenticator中添加谷歌、Facebook登录按钮

一、先完成后端与项目配置 #

1. 配置Amplify Auth社交提供商
   运行amplify update auth命令，选择添加社交登录选项，依次配置谷歌、Facebook的客户端ID、密钥等信息，完成后推送配置到云端。

2. 更新Info.plist配置
   你当前的Info.plist需要补充社交登录相关的URL Scheme和外部链接白名单，修改后的关键片段如下：

   <key>CFBundleURLTypes</key>
   <array>
       <dict>
           <key>CFBundleURLSchemes</key>
           <array>
               <string>myapp</string>
               <!-- 谷歌URL Scheme：格式为com.googleusercontent.apps.你的谷歌客户端ID -->
               <string>com.googleusercontent.apps.1234567890-abcdefghijklmnopqrstuvwxyz</string>
               <!-- Facebook URL Scheme：格式为fb你的Facebook应用ID -->
               <string>fb1234567890</string>
           </array>
       </dict>
   </array>
   <!-- 添加允许打开的外部链接白名单 -->
   <key>LSApplicationQueriesSchemes</key>
   <array>
       <string>googlechrome</string>
       <string>facebook</string>
       <string>fbauth2</string>
   </array>
   

二、在Authenticator的footerContent中添加社交登录按钮 #

直接在你的Authenticator初始化中补充footerContent参数，按钮绑定Amplify.Auth.signInWithWebUI异步方法，完整代码如下：

Authenticator(initialStep: .signIn, 
              headerContent: {
                Button("Continue as guest") {
                    isGuest = true // navigate as guest
                }
                .frame(maxWidth:.infinity, alignment:.trailing)
                .padding(.trailing, 5)
              },
              footerContent: {
                // 谷歌登录按钮
                Button(action: {
                    Task {
                        do {
                            guard let window = UIApplication.shared.windows.first else { return }
                            _ = try await Amplify.Auth.signInWithWebUI(for: .google, presentationAnchor: window)
                            // 登录成功后Authenticator会自动跳转至FirstView
                        } catch {
                            print("谷歌登录失败: \(error.localizedDescription)")
                        }
                    }
                }) {
                    HStack(spacing: 12) {
                        Image("google-logo") // 需将谷歌图标添加至项目资源
                            .resizable()
                            .frame(width: 24, height: 24)
                        Text("用谷歌登录")
                            .font(.system(size: 16, weight: .medium))
                    }
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 12)
                    .background(Color.white)
                    .cornerRadius(8)
                    .overlay(RoundedRectangle(cornerRadius: 8).stroke(Color.gray.opacity(0.2)))
                }
                .padding(.vertical, 6)

                // Facebook登录按钮
                Button(action: {
                    Task {
                        do {
                            guard let window = UIApplication.shared.windows.first else { return }
                            _ = try await Amplify.Auth.signInWithWebUI(for: .facebook, presentationAnchor: window)
                        } catch {
                            print("Facebook登录失败: \(error.localizedDescription)")
                        }
                    }
                }) {
                    HStack(spacing: 12) {
                        Image("facebook-logo") // 需将Facebook图标添加至项目资源
                            .resizable()
                            .frame(width: 24, height: 24)
                        Text("用Facebook登录")
                            .font(.system(size: 16, weight: .medium))
                    }
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 12)
                    .background(Color(red: 25/255, green: 118/255, blue: 210/255))
                    .foregroundColor(.white)
                    .cornerRadius(8)
                }
              }) { _ in
                FirstView()
            }

关键说明 #

• 按钮绑定的核心方法是Amplify.Auth.signInWithWebUI(for:presentationAnchor:)，该方法会拉起对应社交平台的登录页面（优先APP，无APP则用网页），登录成功后Amplify自动处理会话，Authenticator组件会自动跳转到指定的FirstView。
• 需确保项目已导入Amplify和AmplifyPlugins/Auth依赖。
• iOS 15及以上系统，可替换窗口获取方式：

  guard let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
        let window = windowScene.windows.first else { return }
  

内容的提问来源于stack exchange，提问作者freqnseverity