Issue
So i started using Auth0 a week ago and everything seemed to be nice and quick until it was time to add social networks as authorization options on my login page, i started modifiying the template code that was provided with universal login on the web editor and when i finished the markup i noticed there weren't any functions for signing in with linkedin, facebook or github.
window.addEventListener('load', function () {
var config = JSON.parse(
decodeURIComponent(escape(window.atob('@@config@@')))
);
var leeway = config.internalOptions.leeway;
if (leeway) {
var convertedLeeway = parseInt(leeway);
if (!isNaN(convertedLeeway)) {
config.internalOptions.leeway = convertedLeeway;
}
}
var params = Object.assign({
overrides: {
__tenant: config.auth0Tenant,
__token_issuer: config.authorizationServer.issuer
},
domain: config.auth0Domain,
clientID: config.clientID,
redirectUri: config.callbackURL,
responseType: 'code'
}, config.internalOptions);
var webAuth = new auth0.WebAuth(params);
var databaseConnection = 'Username-Password-Authentication';
var captcha = webAuth.renderCaptcha(
document.querySelector('.captcha-container')
);
function login(e) {
e.preventDefault();
var button = this;
var username = document.getElementById('email').value;
var password = document.getElementById('password').value;
button.disabled = true;
webAuth.login({
realm: databaseConnection,
username: username,
password: password,
captcha: captcha.getValue()
}, function (err) {
if (err) displayError(err);
button.disabled = false;
});
}
function signup() {
var button = this;
var email = document.getElementById('email').value;
var password = document.getElementById('password').value;
button.disabled = true;
webAuth.redirect.signupAndLogin({
connection: databaseConnection,
email: email,
password: password,
captcha: captcha.getValue()
}, function (err) {
if (err) displayError(err);
button.disabled = false;
});
}
function loginWithGoogle() {
webAuth.authorize({
connection: 'google-oauth2'
}, function (err) {
if (err) displayError(err);
});
}
function displayError(err) {
captcha.reload();
var errorMessage = document.getElementById('error-message');
errorMessage.innerHTML = err.policy || err.description;
errorMessage.style.display = 'block';
}
let btnLogin = document.getElementById('btn-login')
let btnGoogle = document.getElementById('btn-google')
let btnSignup = document.getElementById('btn-signup')
btnLogin.addEventListener('click', login);
btnGoogle.addEventListener('click', loginWithGoogle);
btnSignup.addEventListener('click', signup);
});
even tho i added Github and Facebook on the "Social Connections" are in the website there hasn't been any change to this code, nor i have been given snippets for working with them on my custom login box.
Solution
Yeah, I too wanted the same features. So got a solution which worked for me.
By just changing the method and connection name.
Html :
<button type="button" id="btn-google" class="btn btn-default btn-danger btn-block">
Log In with Github
</button>
<button type="button" id="btn-linkedin" class="btn btn-default btn-danger btn-block">
Log In with LinkedIn
</button>
js-script :
function loginWithGithub() {
webAuth.authorize({
connection: 'github'
}, function(err) {
if (err) displayError(err);
});
}
function loginWithLinkedin() {
webAuth.authorize({
connection: 'linkedin'
}, function(err) {
if (err) displayError(err);
});
}
document.getElementById('btn-google').addEventListener('click', loginWithGithub);
document.getElementById('btn-linkedin').addEventListener('click', loginWithLinkedin);
Hope this helps you.
Answered By - Clayton D'souza Answer Checked By - Katrina (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.