Question

我正在尝试使用AngularJS和Google的OAuth2创建一个简单的应用程序进行身份验证。

由于弹出式阻止问题和移动友好性，我决定不使用Google APIs Client Library for JavaScript。

这使我可以选择在Google上完全重定向到OAuth2 endpoint，并使用access_token将用户重定向回我的应用。

我认为这样可以正常工作。重定向URI将为“http://myapp.com/#/register”，并附加“access_token”查询参数。然后，我将使用access_token并将用户定向到我的应用程序中的其他位置。

这不起作用，因为Google API凭据（http://developers.google.com/console）不喜欢在重定向URI中使用“＃”。

然后我尝试使用

关闭URI中的'＃'要求

$locationProvider.html5Mode(true);

这也不起作用，因为我的Angular路线无法识别（在Chrome中）明确浏览到“http://myapp.com/register”。

关于如何实现这一点的任何想法？

Answer 1

以下对我有用，在我的应用中将html5模式设置为true。

此代码进入您的控制器以进行重定向页面（确保注入$ window服务）：

//Get parameters from hash fragment
var params = {};
if ($window.location.hash.indexOf('#') === 0) {
    var regex = /([^&=]+)=([^&]*)/g, m;
    while (m = regex.exec($window.location.hash.substr(1))) {
        params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
    }
}

//Validate params, store access token etc.
if (!params.access_token) {
    //...
}

如果您的应用无法识别非＃路由，请确保您的服务器启用了重写引擎，并将所有相关请求重定向到您的角度应用主HTML文件。

Answer 2

如果您使用的是IIS，则可以安装URL Rewrite扩展名。然后更新您的web.config文件。例如，下面的配置会将所有内容重定向到您的Angular应用程序并让它处理路由。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Angular Default" stopProcessing="true">
                    <match url="(.*)" />
                    <action type="Rewrite" url="index.html" logRewrittenUrl="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

AngularJS和Google OAuth2 redirect_uri

2 个答案: