angularjs - angular-ui 在从 facebook oauth 重定向时替换'?' with ' #'-6ren

angularjs - angular-ui 在从 facebook oauth 重定向时替换'?' with ' #'

转载作者：行者123 更新时间：2023-11-30 05:16:37

24

4

我在没有 SDK 的情况下在 angularjs 中实现 facebook ouath 登录。

除一件事外，一切都按预期工作。

当用户点击登录按钮时，重定向到 facebook 登录页面，成功登录后，facebook 触发 redirect_uri URL，用户再次进入应用程序。

问题是，ui-router(可能)替换了'?'路径中带有“#”，所以

http://localhost/fbauth?access_token=xxx&code=yyy
成为
http://localhost/fbauth#access_token=xxx&code=yyy

因此，我无法使用 $stateParams 获取带有查询参数的对象。

令人惊讶的是，当我在浏览器中手动输入或单击链接时http://localhost/fbauth?access_token=xxx&code=yyy
一切正常，并且 ui-router 不会替换“？”用“#”。

我猜，这与重定向场景本身有关。

谁能指出我做错了什么，或者在这种情况下如何更改 ui-router 行为？

这是处理 fb 重定向的状态:

.state('fbauth', {
  url: '/fbauth?access_token&code&expires_in',
  templateUrl: 'static/public/public.html',
  controller: 'publicCtrl'
});

PS ui-router 设置为在 html5 模式下使用 $locationProvider.html5Mode(true);

最佳答案

您可以将此解析函数添加到您的状态，它将用查询字符串 url 替换哈希 url:

resolve: {
    'urlFix': ['$location', function($location){
        $location.url($location.url().replace("#","?"));
     }]
}

因此 /fbauth#access_token=123456&code=abcde&expires_in=99999999 的 url 将被自动重定向
成为 /fbauth?access_token=123456&code=abcde&expires_in=99999999
$stateParams 将被正确填充。
值为 {access_token: "123456", code: "abcde", expires_in: "99999999"}
$location.url() 不会更新，因此当不存在 # 时状态不会重定向。

完整示例代码:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <meta charset="utf-8">
    <title>FBAUTH</title>
</head>
<body ng-app="app">
    <base href="/">
    <div ui-view></div>
    <script>
        angular.module('app', ['ui.router'])
            .controller('publicCtrl', ['$scope','$stateParams', function($scope, $stateParams) {
                // $stateParams should be correctly set (even for hash route)
                console.log($stateParams);
            }])
            .config(['$locationProvider','$stateProvider', function($locationProvider, $stateProvider){
                $stateProvider
                    .state("fbauth",
                    {
                        url: '/fbauth?access_token&code&expires_in',
                        templateUrl: 'fbauth.html',
                        controller: 'publicCtrl',
                        resolve: {
                            'urlFix': ['$location', function($location){
                                $location.url($location.url().replace("#","?"));
                            }]
                        }
                    });

                $locationProvider.html5Mode(true);
            }]);
    </script>
</body>
</html>

关于angularjs - angular-ui 在从 facebook oauth 重定向时替换'?' with ' #'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30257293/

24

4

0

文章推荐： jquery - 如何确定 Facebook 用户是否喜欢某个 URL？

文章推荐： ajax - "Redirect"页面没有刷新(Facebook 照片样式)

文章推荐： facebook - 如何在 Facebook 初始身份验证后请求更多权限

OAuth:OAuth 实现用例
我有一个 webapp，它使用 php 服务器和数据库服务器执行大量 ajax 请求。我还创建了一个 iPhone 应用程序和一个 Android 应用程序，直到现在它们一直作为离线应用程序工作。现
oauth - OAuth 线程安全吗？
OAuth 的访问 token /刷新 token 流对我来说似乎非常不安全。帮助我更好地理解它。假设我正在与利用 OAuth 的 API 集成(如 this one )。我有我的访问 token
oauth - OAuth 和 OAuth 2.0 有什么区别？
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: How is oauth 2 different from oauth 1 我知道这两个不向后兼容。但是，既然已经实
oauth - 在开发和生产环境中使用 OAuth
我已经看到关于此的其他问题( here 、 here 和 here )，但我对任何解决方案都不满意，所以我再次询问。我正在启动一个 Web 应用程序，它将利用来自多个提供商(Google、Facebo
oauth - OAuth 授权码应何时到期？
我知道(在 OAuth 中使用授权代码“授权代码”时)，访问 token 的生命周期应该很短，但刷新 token 的生命周期可能很长。所以我决定为我的项目: 访问 token 生命周期:1 天刷新
oauth - OAuth 可以与手机应用程序一起使用吗？
在没有浏览器的情况下，我们可以在手机上的应用程序中使用 OAuth 吗？如果没有浏览器，用户是否仍然可以批准 token 请求(以便消费者可以继续从服务提供者那里获取 protected 资源)？
oauth - OAuth 2 与 OAuth 1 有何不同？
用非常简单的术语来说，有人可以解释一下 OAuth 2 和 OAuth 1 之间的区别吗？ OAuth 1 现在已经过时了吗？我们应该实现 OAuth 2 吗？我没有看到很多 OAuth 2 的实现；
oauth - 桥接表单例份验证和 OAUTH
修改表单例份验证登录过程并不难，因此除了正常的表单例份验证之外，WebClient 对象对由使用 Thinktecture IdentityModel 设置的 Web Api DAL 提供的 api/
oauth - OAuth 是否总是假定用户界面？
我想连接到 LinkedIn 并通过他们的 API 提取一些信息。 LinkedIn API 使用 OAuth 2.0。我读过的所有关于 OAuth 的文档(无论是在 LinkedIn 的上下文中还
oauth - OAuth 的接受程度如何？
OAuth 与其他身份验证标准的支持范围有多广？这可能是社区维基的东西，但我还是要问。我需要投资一些与服务器身份验证相关的东西，而且那里似乎有一些不错的东西。最佳答案 OAuth 主要用作授权机
oauth - 雅虎和微软是否支持 Oauth 2.0？以及关于 oAuth 2.0 的几个问题
我有几个问题... 雅虎和微软 api 是否支持 oAuth 2.0？如果是，那么主要是什么应该采取的安全措施转移时受到照顾 oAuth 1.0 到 oAuth 2.0。 Google API
oauth-2.0 - google oAuth - 从 google oAuth 登录后如何删除 cookie
我已经用谷歌 oAuth 开发了一个应用程序，这工作正常。我可以登录并访问我的网站。我的问题是，当我从我的应用程序中注销(注销)时，我删除了所有 session ，但未删除经过身份验证的 cook
oauth - 我认为 OAuth 1.0 已经被 OAuth 2.0 弃用是对的吗？
我在 Internet 上寻找一些关于此的信息，最后在 RFC 上找到了 Oauth 1.0 协议(protocol):https://www.rfc-editor.org/rfc/rfc5849 您
oauth - 带有内部返回 URL 的 Google OpenID+Oauth 混合模式登录 - OAuth 不起作用
我正在尝试制作 Google OpenID/OAuth hybrid签到工作。问题是它是一个可安装的网络(所以没有固定域)，我也试图让它在我的开发机器上工作 - 所以返回 URL 类似于 http:/
oauth - DotNetOpenAuth 2、OAuth.net 和 Microsoft.OWIN.Security.oAuth
我想构建一个独立与任何身份提供者(如 ADFS、OpenAM、oracle 身份)一起工作的应用程序。我的目的是验证来自任何一个 IDP 的登录用户，这些 IDP 配置为实现我的 SSO。我不确定
spring -/oauth/authorize 和/oauth/token 在 Spring OAuth 中如何交互？
我正在深入研究 Spring OAuth，发现一些相互矛盾的信息。具体来说，this tutorial声明 /oauth/token 端点在将刷新 token 授予客户端应用程序之前处理用户名和密码
oauth - 来自命令行的三足 OAuth token
如何通过自定义命令行工具支持三足式 OAuth 工作流？我想允许我的 CLI 工具的用户上网、登录并在本地缓存 token ，类似于 heroku login。正在做。最佳答案你必须扔掉同意屏幕
oauth - 什么是 oauth 域
什么是 oauth 域？是否有任何免费的 oauth 服务？我可以将它用于 StackApps registration 吗？？我在谷歌上搜索了很多，但找不到答案。最佳答案这是redirect_
oauth - Yahoo OAuth 实现无法离线工作
我需要将我的 Delicious 书签下载到非 Web 应用程序，而无需持续的用户交互。我正在使用 Delicious 的 V2 API(使用 oAuth)，但问题是他们的访问 token 似乎在一小
oauth - nginx 负载均衡器和 OAuth
我正在尝试为两台服务器设置一个 nginx 负载均衡器/代理，并在两台服务器上运行 OAuth 身份验证的应用程序。当 nginx 在端口 80 上运行时，一切都运行良好，但是当我将它放在任何其他端

首页

博学

6Ren·AI

商城

angularjs - angular-ui 在从 facebook oauth 重定向时替换'?' with ' #'

完整示例代码: