使用 f#/fable/asp.net/react 添加 google 登录按钮

2024-01-27

我正在使用 SAFE 堆栈(https://safe-stack.github.io/ https://safe-stack.github.io/)并通过示例 dojo。到目前为止非常棒。

我想扩展该示例以包含一个通过 Google 登录/身份验证的按钮。所以我在谷歌网站上查看了一个例子(https://developers.google.com/identity/sign-in/web/build-button https://developers.google.com/identity/sign-in/web/build-button)。然后我了解了如何使用 ASP.NET 进行身份验证()因此,我最终对如何将其集成到 SAFE 项目中感到困惑。有人能告诉我他们会做什么吗?我应该尝试使用 ASP.NET Identity 还是应该使用 JWT 方法?我什至不知道它们是否相同,因为我对网络框架很陌生......

我的另一个问题是如何将原始 Javascript 注入 SAFE 项目的客户端。上面的谷歌示例显示了原始 JS/CSS/HTML 代码?我应该按原样注入它,还是应该在 React 中查找执行此操作的某个按钮并将该想法通过 Fable 映射回来?


设置 OAuth

使用 Google OAuth 最简单的方法是等到 Saturn 的下一个版本,届时 Saturn 将包括use_google_oauth我刚刚添加的功能。 :-) 看源代码 https://github.com/SaturnFramework/Saturn/blob/master/src/Saturn.Extensions.Authorization/OAuth.fs如果您对它的工作原理感兴趣,但恐怕您无法自己实现use_custom_oauth因为您会遇到类型错误(底层 ASP.NET 代码有一个 GoogleOptions 类,并且use_custom_oauth想要一个 OAuthOptions 类,但它们不兼容)。

要使用它,请将以下内容添加到您的application CE:

use_google_oauth googleClientId googleClientSecret "/oauth_callback_google" []

最后一个参数应该是一个序列string * string表示键和值的对:您可以使用元组列表或传递的映射Map.toSeq, 管他呢。该序列的键是Google 返回的 JSON 结构 https://developers.google.com/+/web/api/rest/latest/people#resource对于“获取有关此人的更多详细信息”API 调用,值是这些键应在 ASP.NET 声明系统中映射到的声明类型。默认映射是use_google_oauth已经做的是:

  • id→ ClaimTypes.NameIdentifier
  • displayName→ 声明类型.名称
  • emails[](参见注释)→ ClaimTypes.Email

这三个由 ASP.NET 自动映射。我添加了第四个映射:

  • avatar.url→ `"urn:google:头像:url"

这个没有标准的 ClaimTypes 名称,所以我选择了一个任意的 URN。注意:此功能尚未发布,并且从现在到 Saturn 的下一版本中发布该功能,此字符串可能会发生变化(尽管不太可能)。

通过自动映射这四种声明类型,我发现不需要指定任何其他声明,因此我将最终参数留给use_google_oauth作为我的演示应用程序中的空列表。但是如果您想要更多(假设您希望在本地化中使用用户的首选语言),那么只需将它们添加到该列表中,例如:

use_google_oauth googleClientId googleClientSecret "/oauth_callback_google" ["language", "urn:google:language"]

然后一旦有人登录,查看User.Claimsseq 用于类型声明"urn:google:language".

注意:emails[]JSON 中的列表:我还没有使用具有多个电子邮件的 Google 帐户对此进行测试,因此我不知道 ASP.NET 如何选择电子邮件放入 ClaimTypes.Email 声明中。它可能只选择列表中的第一封电子邮件,也可能选择带有type of account;我只是不知道。可能需要一些实验。

另请注意,第三方 OAuth(包括 GitHub 和 Google)已拆分为新的 Saturn.Extensions.Authorization 包。它将在 Saturn 的下一个版本(可能是 0.7.0)发布的同时在 NuGet 上发布。

制作按钮

一旦你拥有了use_google_oauth打电话给你的application,创建如下内容:

let googleUserIdForRmunn = "106310971773596475579"
let matchUpUsers : HttpHandler = fun next ctx ->
    // A real implementation would match up user identities with something stored in a database, not hardcoded in Users.fs like this example
    let isRmunn =
        ctx.User.Claims |> Seq.exists (fun claim ->
            claim.Issuer = "Google" && claim.Type = ClaimTypes.NameIdentifier && claim.Value = googleUserIdForRmunn)
    if isRmunn then
        printfn "User rmunn is an admin of this demo app, adding admin role to user claims"
        ctx.User.AddIdentity(new ClaimsIdentity([Claim(ClaimTypes.Role, "Admin", ClaimValueTypes.String, "MyApplication")]))
    next ctx

let loggedIn = pipeline {
    requires_authentication (Giraffe.Auth.challenge "Google")
    plug matchUpUsers
}

let isAdmin = pipeline {
    plug loggedIn
    requires_role "Admin" (RequestErrors.forbidden (text "Must be admin"))
}

现在在你的范围内(注意:“范围”可能会在 Saturn 0.7.0 中重命名为“路由器”),执行如下操作:

let loggedInView = scope {
    pipe_through loggedIn

    get "/" (htmlView Index.layout)
    get "/index.html" (redirectTo false "/")
    get "/default.html" (redirectTo false "/")
    get "/admin" (isAdmin >=> htmlView AdminPage.layout)
}

最后,让你的主路由器有一个 URL,将东西传递给loggedInView router:

let browserRouter = scope {
    not_found_handler (htmlView NotFound.layout) //Use the default 404 webpage
    pipe_through browser //Use the default browser pipeline

    forward "" defaultView //Use the default view
    forward "/members-only" loggedInView
}

然后你的登录按钮就可以转到/members-only路线,你会没事的。

请注意,如果您想要多个 OAuth 按钮(Google、GitHub、Facebook 等),您可能需要稍微调整一下,但这个答案已经足够长了。当您需要多个 OAuth 按钮时,请继续问另一个问题。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 f#/fable/asp.net/react 添加 google 登录按钮 的相关文章

  • ASP.NET - 在 GridView 中显示图像和 pdf

    我想在 asp GridView 中显示 图像 列 这个想法是提供图像的缩略图以及实际尺寸图像的链接 对于某些行 这也可以是 PDF 文档 我想要 PDF 的链接 PDF 或图像存储在 SQL 数据库中 现在我在处理程序 ashx 文件中出
  • Firebase setDoc() 不创建文档

    我正在使用 auth 创建一个新用户 该用户正在工作 然后使用新创建的 uid 创建一个具有相同内容的新文档 const currentUser await auth createUserWithEmailAndPassword email
  • 如何强制 BundleCollection 刷新 MVC4 中缓存的脚本包

    or 我如何学会停止担忧 只针对 Microsoft 完全未记录的 API 编写代码 有没有官方的实际文档System Web Optimization发布 因为我确实找不到任何内容 没有 XML 文档 而且所有博客文章都引用了 RC AP
  • 如何在React中处理多个路由器

    假设我们有一个网络应用程序 它通常有很多视图 例如索引页面 管理面板 帮助页面 联系人等 我在主index js 中使用react router dom 来处理它们 它工作得很好 但是现在我在开发管理面板时遇到了问题 它是 index js
  • 有没有办法显示嵌套在 Grid 组件内的 Material-UI 抽屉?

    我正在使用 Material UI 创建一个 Web 应用程序 主页分为 3 个网格 每个网格有一个height of 500px 我想在中间网格内显示一个带有一些操作选项的抽屉 那可能吗 到目前为止 我只能在整个屏幕上显示它 这是我的主要
  • Recoil 中的动态原子键

    我正在尝试创建一个动态表单 其中表单输入字段是根据 API 返回的数据呈现的 由于atom需要有一个唯一的键 我尝试将它包装在一个函数中 但是每次我更新字段值或重新安装组件 尝试更改选项卡 时 我都会收到一条警告 我在这里做了一个小的运行示
  • NestJs + Passport - JWTStrategy 永远不会用 RS256 令牌调用

    我正在尝试在 Nestjs 后端实现 RS256 JWT 令牌 我按照中提供的示例进行操作Nestjs 文档 https github com nestjs nest tree master sample 19 auth 在我的模块中我注册
  • 在没有 IIS 的计算机中打开设置为 IIS 目录的 Web 项目,指向嵌入式服务器

    我可以在TFS中打开一个Web项目 但是 在我的 QA 环境中 我必须将其更改为使用 IIS 在我的本地开发环境中 我没有IIS 无法安装它 新的公司规则拒绝我进行 QA 访问 并且我无法打开我的 Web 项目来在我的计算机中修复它 当我打
  • 如何以编程方式将 SMTP 服务器详细信息存储(保存)回 web.config

    搜索 StackOverflow 我发现这个问题是关于如何从 Web Config 检索 SMTP 设置 https stackoverflow com questions 2019175 how to programmatically r
  • 如何在React Material UI简单输入中启用文件上传?

    我正在创建一个简单的表单来使用带有 redux 表单和材料 ui 的 electro react boilerplate 来上传文件 问题是我不知道如何创建输入文件字段 因为材料用户界面不支持上传文件输入 关于如何实现这一目标有什么想法吗
  • 哪种反应钩子与 firestore onsnapshot 一起使用?

    我在我的 React Native 应用程序中使用了大量的 Firestore 快照 我也在使用 React hooks 代码看起来像这样 useEffect gt someFirestoreAPICall onSnapshot snaps
  • 在 ASP.NET 中使用 AjaxControlToolkit 的异步 AJAXFileUpload 控件返回数据

    我正在使用上面的控件 注意它是 ASP NET 控件 我似乎看到很多人使用用 javascript 编写的类似名称的控件 来允许使用进度条 拖放操作来上传多个文件 该部分一切正常 但我需要随文件返回两条数据 具体来说 用户从两个文本框中输入
  • 对 URL 进行编码 C#

    所以我有一个看起来像这样的 URL http www test com folder1 id 3 但基本上 当他们单击按钮时 我想在 URL 栏中显示与该 id 关联的值的名称 例如 id 3 是名为 Rollex 的手表 所以我想要读取
  • Next.js:如何将 source-map-explorer 与 Next.js 一起使用

    我想分析我的 Next js 构建源地图浏览器 https www npmjs com package source map explorer 有人可以帮我编写脚本吗 对于 React CRA 我使用以下脚本 build analyze n
  • 创建 html 结构,每个 li 中仅允许 3 个 div 元素。在 React + underscore.js 中

    这是以下内容的位副本如何创建每个 li 中仅允许 3 个 div 元素的 html 结构 在 React underscore js 中 https stackoverflow com questions 38008023 how to c
  • ASP.NET Core 与现有的 IoC 容器和环境?

    我想运行ASP NET 核心网络堆栈以及MVC在已托管现有应用程序的 Windows 服务环境中 以便为其提供前端 该应用程序使用 Autofac 来处理 DI 问题 这很好 因为它已经有一个扩展Microsoft Extensions D
  • 两种类型的回发事件

    1 我发现了两篇文章 每篇文章对两种类型的回发事件的分类都略有不同 一位资源说两种类型的回发事件是Changed事件 其中控件实现 IPostbackDataHandler 当数据在回发之间更改时触发 然后Raised事件 其中控件实现 I
  • 移动浏览器中的 React 性能

    我有一个组件 表 其中包含许多行 其中包含数据编辑 其掩码形式为contenteditable 可以选择所有字段并同时更改所有行 在桌面上它运行得相当快 但在 iPhone 6 上我有不真实的滞后 Safari 每次操作都会挂起 20 秒
  • 如何解决此错误“不要使用对象作为类型”?

    我不明白这个错误消息造成的 我的组件有两个和一个包含对象的数据数组 我收到一条错误消息 不要使用object作为一种类型 这object类型目前很难使用 我该如何解决它 我附加了数组包含对象的数据 first tsx import data
  • ASP.NET Core 会话超时

    我记得我们在 ASP NET 中使用了 session timeout 来更改会话超时 如果不更改 则为 20 分钟 我尝试在 Startup cs 中更改 ASP NET Core 3 1 中的会话超时 但没有任何反应 我对操作员使用身份

随机推荐

  • 如何在 postgresql 中创建 n-gram

    我希望在我的应用程序中具有搜索功能 我使用 trigram 来实现它 并且工作正常 问题是 trigram 正在创建单词的 3 个字符组的序列 我想要在单个对象中包含超过 3 个字符 例如 select show trgm abcpqrs
  • HTTP 缓存控制 max-age,必须重新验证

    我有几个与缓存控制相关的疑问 如果我指定缓存控制max age 3600 must revalidate对于静态 html js images css 文件 在 HTTP 标头中定义了 Last Modified 标头 浏览器 代理缓存 如
  • 从 Windows 服务启动 Windows 应用程序

    我正在尝试使用以下代码从 Windows 服务启动 Windows 应用程序 Process Start filename exe 在 Windows 7 中 我收到一个弹出窗口 显示 此计算机上运行的程序正在尝试显示一条消息 您无法从 W
  • Python subprocess.popen() 无需等待

    我在 Windows 上使用 Python 3 4 2 在 script1 py 中我正在这样做 myProc subprocess Popen sys executable script2 py argument myProc commu
  • iPhone 上奇怪的应用程序崩溃 - 没有被 Apple 拒绝

    我最近通过 iTunes Connect 向 Apple 提交了我的应用程序 它现在已在 iTunes 商店中 然而 当我把它下载到朋友的 iPhone 上时 它立即崩溃了 我在 iPhone 模拟器和 iPad 上进行了测试 我没有 iP
  • 可编辑数据表 RowKey Null

    我有一个可编辑的 Primefaces 数据表 配置为在编辑单元格时调用 onCellEdit 方法 一切工作都很好 除了 CellEditEvent rowKey 始终为 null 尽管在数据表声明中使用 rowKey 将其显式设置为有效
  • 在 Windows 上,如何检测文件的行结尾?

    我已经看到了这些问题的答案 但据我所知 这些答案并不是从 Windows 角度来看的 Windows 使用 CR LF Unix 使用 LF Mac 使用 LF 经典 mac 使用其他内容 我没有足够的智慧来告诉我 如果一个文件使用的行尾与
  • 如何使浏览器后退按钮忽略主题标签?

    我有一个网站 它使用哈希来打开 关闭当前页面上的一些选项卡和图层 使用哈希值的原因是 如果用户通过链接访问另一个页面 然后返回原始页面 则所有选项卡和图层的打开方式都应与离开该页面时完全相同 问题是 在第一页上并使用浏览器后退按钮时 只有哈
  • Bower:ENOGIT Git 未安装或不在 PATH 中

    Git 已安装并位于路径中 平台 红帽企业 Linux en wikipedia org wiki Red Hat Enterprise Linux 5 8 gt which git usr local bin git 然而 Bower 找
  • 基于窗口调整大小的 jQuery 位置元素

    如果您查看此页面 http dev driz co uk tips http dev driz co uk tips 我正在做一些实验来更多地了解 jQuery 以及如何开发类似于我们在 Facebook 上看到的东西 您将看到我有一个相对
  • Tensorflow.compat.v2.__internal__.tracking'没有属性'TrackableSaver'错误

    安装 Tensorflow js 后出现此错误 以前这个程序是有效的 会不会是版本的问题 我真的很好奇是什么原因造成的 提前致谢 File OneDrive Masa st Bitirme Proje neural network sini
  • Android - Google Map API v2 - 不幸的是,应用程序已停止。每次强制关闭

    大家好 我在这里找到了关于使用 Google Map API 时强制关闭 Android 中的应用程序的类似主题 我几乎尝试了所有方法 一步一步按照教程进行操作并检查了两次以上 每次出现问题并且我的应用程序都会立即崩溃 我什至无法运行 Go
  • Bootstrap-select插件:如何避免闪烁

    Bootstrap select 插件非常棒 http silviomoreto github io bootstrap select http silviomoreto github io bootstrap select 它提供了一种在
  • Ruby on Rails、Paperclip、Heroku、GitHub 和 AWS - 保护密钥

    我正在使用 Heroku 托管的 RoR 我想使用回形针将文件存储在 s3 上 我的源代码托管在 github 上 全世界都可读 对世界其他地方保密密钥的最佳做法是什么 Paperclip 建议将访问密钥存储在配置文件 或代码 中 例如我有
  • 使用单链表,如何在python中交换节点?

    目前 我一直在尝试根据我的主功能开关 myList index 重新排列链表 def createList plist linkedList None goes backwards adding each element to the be
  • 使用 XPath 提取标签之间的文本(包括标记)

    我有以下 XML 片段 span class st In Tim em Power em Politieman span 我想提取之间的部分 span 标签 为此 我使用 XPath span class st 然而 这将提取所有内容 包括
  • 设置 ContentPresenter 中自动生成的文本块的样式

    正如我所看到的 很多人都遇到了这个问题 但我不明白为什么我的案例不起作用 它开始让我发疯 背景 我有一个DataGrid将根据每个单元格的值着色 因此 我有一个动态样式来解析每个单元格使用的实际模板 背景现在可以相应地工作 新问题 当我有深
  • 在会话状态中存储购物车的数据

    尝试将我存储的内容添加到购物车中以进入会话 然后将其转移到另一个页面以获取 GridView 以显示我已添加到购物车会话中的所有项目 将其存储为对象会话 AddToCart 获取该行详细信息并存储在会话中 然后获取该会话对象并将其显示在另一
  • HTML5 CANVAS:如何从服务器保存和重新打开图像

    我用 html5 canvas 画一些东西 然后我想保存它 当再次加载页面时 我想将我保存的图像加载回画布 我成功地将数据保存到服务器中的文件中 但由于某种原因 这是一个奇怪的文件 无法通过ant软件打开 当然也不能通过我的画布打开 我将其
  • 使用 f#/fable/asp.net/react 添加 google 登录按钮

    我正在使用 SAFE 堆栈 https safe stack github io https safe stack github io 并通过示例 dojo 到目前为止非常棒 我想扩展该示例以包含一个通过 Google 登录 身份验证的按钮