Question

我想在我的网站上使用Twitch进行oauth2登录，我有一个angular2网站，我正在使用路由器链接。当我想以抽搐的方式登录我时说是的，这是我，所以一切都很好。好的结束不是xD

当我去twitch oauth2进行授权时，我需要一个redirectUri。我现在的问题是如何在angular2中做到这一点？因为我无法输入www.page.com/app/afterlogin/afterlogin.php或者那样的想法。

我需要这个，因为我需要来自用户的访问令牌，我不希望他需要自己授权x次。

也许这有助于我：

https://api.twitch.tv/kraken/oauth2/authorize?client_id=[client_id]&redirect_uri=http://www.page.com/app/AfterLogin/afterlogin.php&response_type=code&scope=user_read

我希望有人能帮助我重定向和一些oauth2登录：）

Answer 1

授权代码授权流程只是您使用OAuth2的几种方法之一。它不适合在浏览器中运行的应用程序，因为它需要一个客户端密钥，而您无法在浏览器中保密。

还有另一个流 - 针对JavaScript应用程序的隐式流 - 您在重定向URI中获取访问令牌和/或ID令牌 - 在哈希部分（＃...）中，因此它们不会得到到服务器。然后，您可以轻松地将任何Angular路径路径用作重定向URI。因此，来自OAuth2服务器的重定向网址可能如下所示：

http://example.com/myAngularApp/afterLogin#token=...

当你到达那个URI时，你只需保存令牌并将路由更改为某种真实形式。

Answer 2

让我假设一个具有单页应用程序前端的RESTful后端并回答问题。

当您的前端将身份验证请求发送到服务器时，请附加服务器成功处理程序命中的重定向URL。在该URL中，传递一个afterLoginUrl查询参数，前端会将您的SPA路由到触发登录的特定页面。（即，例如，如果请求是由尝试访问{base_url}/profile/project/projects的用户触发的，则将用户引导至该页面，而不是常规登录所喜欢的默认页面，例如{{1 }}。结果，您将获得一个类似于以下内容的网址。

base_url/profile/about 端口8080用于后端，端口4200用于前端。
由于使用的是RESTful服务，因此无法保存重定向网址。因此，您需要将重定向网址与您发送给Cookie的请求一起发送给Cookie。
从提供商处获得成功后，您将通过提取发送的cookie来知道要打SPA的路线。然后，您将指定一条路径来处理来自您自己的服务器（在我的情况下为http://localhost:8080/oauth2/authorize/google?redirect_uri=http://localhost:4200/oauth2/redirect&afterLoginUrl=/profile/project/projects）中的请求。
在步骤3中为路由指定的组件上，您将收到oauth2/redirect和token（如果有）。您将在网址上看到类似以下内容的

afterLoginUrl
验证令牌，检查是否存在http://localhost:4200/oauth2/redirect?afterLoginUrl=/profile/project/projects&token={token value}，如果存在，则重定向到afterLoginUrl指定的路由，如果没有，则重定向到默认配置文件页面。< / p>

如何使用oauth2登录重定向到Angular路由器链接？

2 个答案: