Laravel Rest API Google Auth 在 Angular

Posted 2023-03-15

【中文标题】Laravel Rest API Google Auth 在 Angular

【英文标题】：Laravel Rest API Google Auth at Angular

【发布时间】：2018-08-19 02:01:28

【问题描述】：

认证服务器Api是问题

我正在尝试在 laravel 中创建 API，并在 2 个不同的服务器中创建 Angular App。我没有得到一篇可以逐步解释我的好文章。

我面临的问题是我不确定如何处理 client_secret 我确定我需要在我的 Angular 应用程序上进行身份验证和登录时验证这一点（在服务器 laravel 上验证）

我是否使用重定向 url 将其设置为 laravel 路由（因为谷歌在成功登录时使用访问令牌重定向从 angular 到我指向的任何 url）还是在我拥有它之后从 angular 拨打电话在角度范围内，即使用休息调用将 id 令牌发送到 laravel 路由

我正在制作 laravel api，因为将来我可能有一个移动应用程序，我可以重复使用该 api

我知道我可能在错误的论坛中。但这是我所知道的响应速度最快的论坛。

【问题讨论】：

这可能会对您有所帮助。 digitalocean.com/community/tutorials/an-introduction-to-oauth-2

【参考方案1】：

您可以使用JWT 验证SPA。

这里好，步骤：

1。创建身份验证端点

您需要提供一个端点来登录。比方说，/api/v1/login。这个端点，你应该像我提到的那样实现 JWT。所以这个端点应该像这样请求：

HTTP 方法：POST

标题

'Content-Type': 'application/json'

正文

'email': email, 'password': password

并返回一个令牌：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o

这个令牌你应该保存在生命周期应用程序中，或者最好放在本地存储 js 中。 出于安全原因，您必须设置过期的令牌。

2。使用令牌

不，你有一个令牌，这个令牌用于授权用户请求安全 api。假设，用户想要获取他的个人资料/api/v1/users/1。因为这个api是安全的，所以需要pass token。

HTTP 方法：GET

标题

   'Content-Type': 'application/json',
   'Authorization': "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o"

就是这样。

每次您想要访问安全（认证）端点时，您都​​应该发送标头承载。

注意事项：

令牌通常有生命周期或已过期，请确保 如果您将令牌保存到本地存储以避免刷新页面时丢失令牌，请确保在注销时清除本地存储 检查documentation为 laravel 创建令牌。

【讨论】：

我已经通过 google auth 验证了 Angular 应用程序并获得了 access_token 我如何使用它来验证 laravel api？您的答案更多是使用 google auth 对 laravel api 进行独立身份验证

【参考方案2】：

假设您有一个 Angular 应用程序，其中 client_id="angularId" 和 client_secret="angularsecret" 并且您有一个配置了 client_id="mobileclientId" 和 client_secret="mobilesomuchsecret" 的移动应用程序。因此 google 使用 client_id 和 secret 来识别和保护用户想要登录的哪个客户端。

用户使用他们的凭据进行身份验证后，谷歌会在开发者控制台中检查您配置的客户端的返回网址。如果有效，则返回client的return_url中的access_token和id_token作为浏览器的hash参数。并且您需要将从 google 返回的 access_token 存储在 cookie 或一些 localStorage 中。

您的 laravel api 需要做的是验证您在标头中发送的令牌。你向谷歌提出关于你通过 api 请求发送的 access_token 的请求。它询问谷歌 access_token 是否有效？我不熟悉 laravel，但我相信你会找到一些库。 另请检查此线程： How can I verify a Google authentication API access token?

如果您没有足够的经验，还要小心身份验证。我认为您必须在客户端使用 Oidc 库。这可能会帮助您： https://github.com/manfredsteyer/angular-oauth2-oidc

【讨论】：

我现在正在学习这个流程。所以你是说在我登录 Angular 后（我只是使用客户端 ID，前端应用程序不需要客户端密码）然后重定向发生在谷歌控制台中配置到服务器端 api 只是为了存储 access_token？跨度>

客户端没有发生重定向。当您向服务器端 api 发出请求时，您将 access_token 添加到 Authorization 标头中。然后在您的服务器端 api 中，通过向 google 发送请求来验证令牌。如果 google 使用无效令牌响应，则用户未通过身份验证，那么您的客户端应用程序将获得 401 响应

【参考方案3】：

我相信您有两种选择，具体取决于您需要实现的目标。 （Google Auth 的工作方式可能消除了第一个 - 恐怕我不熟悉那个。）

选项 1)

您将用户的凭据发送到您的服务器 您的服务器将通过 Google 验证凭据（他们是否有 SDK 或者更像是使用自己的 UI 的 Facebook 登录？） 如果凭据有效，您可以切换到本地身份验证（如上文所述的@hendrathings）

选项 2)

您通过 Angular 应用对用户进行身份验证 如果凭据有效，您会将响应转发到您的服务器*** 服务器可以使用 Google 的公共 API 使用收到的令牌验证有效性 如果凭据有效，您可以切换到本地身份验证

*** 如果您愿意，您可以直接使用来自 Google 的重定向 URL，但是（如果我理解正确并且您有两个单独的应用程序）您可能必须使用来自 Laravel 的一些派生凭据进行 POST原始应用程序的 API 反过来可以做它的事情并重定向回 UI - 这对可发现性并没有真正的帮助，更糟糕的是，它会在之间引入不必要的耦合你的应用，所以感觉不对

注意：我不知道您的用例以及您是打算在登录后在应用程序中使用 Google API 还是只是将其用作便利功能。出于这个原因，我概述了我认为您拥有的基本选项，但我可能离这里很远。

【参考方案4】：

实现 API 身份验证（如 oAuth）的最佳方式是使用 Laravel 包“Passport”。它易于安装和使用。您可以在此处获得 Laravel 5.5 的详细安装和使用方法：https://laravel.com/docs/5.5/passport 或根据您的 Laravel 版本使用文档。

因此，在 Angular 结束时，您必须使用授权密钥来授予密码，并将响应代码存储在本地存储中以供将来请求身份验证。

它为您的 Laravel 应用程序提供了完整的 OAuth2 服务器实现。

如果您需要更多帮助，请告诉我。谢谢

【讨论】：

您可以像使用 google oAuth 2.0 一样使用它

【参考方案5】：

只需提及 laravel 路由名称即可。一旦你从谷歌重定向后到达 laravel 路线。从控制器更新您想要的信息，并从 laravel 控制器重定向到特定的角度路由。