使用 auth0-angular 自定义 auth0-lock答案

【问题标题】：Customizing auth0-lock with auth0-angular使用 auth0-angular 自定义 auth0-lock
【发布时间】：2016-05-03 17:14:21
【问题描述】：

我正在试验来自 www.auth0.com 和 AngularJS 的 auth0-lock。我能够像在 SDK 中一样传递一些参数：https://auth0.com/docs/libraries/lock/customization#connections-array-

        auth.signin({
            disableSignupAction: true,
            socialBigButtons: true,
            //these lines don't work
            //no changes (username, password appears)
            //connection: 'windows-live'
            //this line returns 'No valid connection found'
            //connections: 'windows-live'
            //this line returns 'No valid connection found'
            //connections: ['windows-live']
            //this line doesn't change anything
            //connection: ['windows-live']

        }

但我无法传递连接（来自 SDK 的非角度版本）

lock.show({
connections: ['twitter', 'facebook', 'linkedin']
});

两个参数connection或connections都不起作用。

我遇到的问题是，如果我不指定连接（connections）用户名和密码就会出现。根据 SDK，我需要对其进行硬编码，以隐藏这些字段。由于 SDK 是为 JS 而不是 AngularJS 编写的，因此我似乎在传递数组或参数时遇到了问题。有什么想法吗？

【问题讨论】：

标签： angularjs auth0

【解决方案1】：

文档在这方面似乎马马虎虎。如果您使用 //cdn.auth0.com/js/lock-8.js 它应该可以开箱即用，如之前的响应中所见并遵循示例https://github.com/auth0/auth0-angular/tree/master/examples。

我与连接：& 连接数小时试图让一些自定义连接正常工作。

作为基础，您可以启用 Auth0 社交提供者中的各种提供者，确保它们切换为绿色。尽可能简单地开始并从那里扩展。

 auth.signin({
        scope: 'openid name email'

index.html

<script type="text/javascript" src="//cdn.auth0.com/js/lock-8.js"></script>
<!--script src="//cdn.auth0.com/w2/auth0-6.7.js"></script-->
<script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>
<script src="./lib/a0-angular-storage/dist/angular-storage.js"></script>
<script src="./lib/angular-jwt/dist/angular-jwt.js"></script>

登录控制

 .controller('LoginCtrl',
  function onLoginSuccess(profile, token) {
        console.log("login ok");
    }

    function onLoginFailed() {
        console.log("failed login");
    }

    auth.signin({
        scope: 'openid name email'
    }, onLoginSuccess, onLoginFailed);
}

配置块

.config(function($stateProvider, $urlRouterProvider, authProvider,
             jwtInterceptorProvider, $httpProvider) {

authProvider.init({
    domain: '',
    clientID: '',
    loginState: 'login',
    loginUrl: true
});


    authProvider.on('loginSuccess', function($location, profilePromise, idToken, store) {
        profilePromise.then(function(profile) {
            console.log(JSON.stringify(profile));

【讨论】：

【解决方案2】：

您是否在仪表板中启用了社交功能？

【讨论】：

【解决方案3】：

你想发送一个带有连接参数的数组：

connections: ['windows-live']

而不是像你这样的字符串：

connections: 'windows-live'

【讨论】：

我没有提到这一点，但它也不好用。结果：“找不到有效的连接”我更新了问题。