在网页中,我们经常会看到这样的登陆界面: 点击链接后,可以通过第三方账号,比如Gmail登陆。
这里我们简单聊聊里面的数据流,以ReactJS为例。
本文分以下几个部分:
1. 介绍
2. UML
3. 截图: 公众号德国数据圈 AI聊天编程
介绍
本项目主要想实现以下功能:
需要添加的依赖库如下:
yarn add @react-oauth/google@latest react-redux redux-persist @reduxjs/toolkit
redux-devtools-extension
UML
登出部分需要单独实现,google API 不负责。 我们只需要在登出按钮被点击时,清除 Redux 中的数据然后跳转页面即可。
登陆相关的文件,主要是这些Javascript:index.js、App.js、authSlice.js、store.js 和 LoginForm.js。
在下面的 UML 中,用户与 LoginForm 组件交互提交登录表单。 提交表单时,LoginForm 向store发送登录操作,store使用 authSlice 更新身份验证状态。
然后Store将更新后的身份验证状态发送到 GoogleOAuthProvider 组件,该组件将状态发送到 Google 进行身份验证。 Google 以身份验证结果作为响应,该结果被发送回商店并用于使用 authSlice 更新身份验证状态。
最后,LoginForm 使用更新后的身份验证状态重新呈现,并将身份验证结果显示给用户。
截图: 公众号德国数据圈 AI聊天编程
通过公众号AI聊天,可以获取的一些编程需要的辅助信息。以下是部分截图:
最前面的PlantUML也是通过AI聊天实现的,相信你能猜到是怎么做的吧。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。