Flutter Widget 之package: Firebase UI for Auth

若你曾有得执行OAuth的经验或许就知道这有多麻烦，因此下次需为应用程序添加身份验证时，不妨试试用以下两种方式为应用加入身份验证机制：Firebase Authhentication和Firebase UI for auth包，只要几行编码就可做到

firebase_ui_auth由Firebase官方发布，其中包括各种小部件和全屏功能以便实施身份验证。

可用登录屏幕小部件来为应用添加页面藉此引导用户进行身份验证.

首先为应用新增名为sign-in的路径以便引至登录屏幕小部件

@override
Widget build(BuildContext context) {
    return MaterialApp(
        routes: {
            '/': (context) => HomeScreen(),
            '/sign-in': SignInScreen(),
        },
    );
}

然后得到SignInScreen指令，指定所属Firebase项目所用的验证机制,屏幕便会填充相符的要素

routes: {
    '/': (context) => HomeScreen(),
    '/gisn-in': SignInScreen(
        providers: const [
            EmailAuthhProvider(),
        ],
    ),
}

若只用电邮和密码认证，则无须再做其他设定 Firebase Authentication和Firebase UI还支持其他身份验证，例如Google、Github和Apple等登录方式

routes: {
    '/': (context) => HomeScreen(),
    '/gisn-in': SignInScreen(
        providers: const [
            EmailAuthhProvider(),
            GoogleProvider(clientId: '1234abcd'),
            GithubProvider(...),
            AppleProvider(...),
            TwitterProvider(...)
        ],
    ),
}

完整名单请见Firebase文档。

就登录屏幕小部件提供者的程序配置加入任何一种认证方式并做相应设置。成了，用户又多了一项登录选择。

若使用的时候Google登录这样的验证(OAuth),仅需提供Google登录所属客户端ID即可。

Firebase UI for auth包也包含哟哦那个户注册、忘记密码、用户个人资料之类的屏幕，

当然，您会希望验证页与应用的其他部分是搭配的，Firebase UI小部件是可自定义的，甚至还有小部件和控制器方便为支持的验证方式自定义屏幕转换效果

ezgif.com-gif-maker (4).gif

所以若你只想专心构建所在乎的应用程序部分，那验证这方面就交给Firebase Authentication以及Firebase UI包来处理

如果想了解有关package: Firebase UI for Auth的内容，或者关于Flutter的其他功能，请访问pub.dev

原文翻译自视频：视频地址