如何在Auth0自定义登录框中添加LinkedIn登录功能

Auth0自定义Universal Login模板不会根据后台启用的社交连接自动生成对应代码，所有OAuth类社交登录的调用逻辑完全一致，只需要复用现有Google登录的逻辑，替换对应连接标识即可，具体操作如下：

• 各主流社交平台默认对应的connection参数值：
  • Google：google-oauth2（即现有代码中已使用的取值）
  • Facebook：facebook
  • GitHub：github
  • LinkedIn：linkedin

1. 仿照现有loginWithGoogle函数，新增其他社交平台的登录处理函数：

function loginWithFacebook() {
  webAuth.authorize({
    connection: 'facebook'
  }, function (err) {
    if (err) displayError(err);
  });
}

function loginWithGithub() {
  webAuth.authorize({
    connection: 'github'
  }, function (err) {
    if (err) displayError(err);
  });
}

function loginWithLinkedin() {
  webAuth.authorize({
    connection: 'linkedin'
  }, function (err) {
    if (err) displayError(err);
  });
}

2. 在页面DOM绑定逻辑区块，新增对应社交按钮的元素获取和点击事件绑定，替换原有仅绑定3个按钮的代码段：

let btnLogin = document.getElementById('btn-login')
let btnGoogle = document.getElementById('btn-google')
let btnSignup = document.getElementById('btn-signup')
// 新增其他社交登录按钮的DOM引用
let btnFacebook = document.getElementById('btn-facebook')
let btnGithub = document.getElementById('btn-github')
let btnLinkedin = document.getElementById('btn-linkedin')
  
  
btnLogin.addEventListener('click', login);
btnGoogle.addEventListener('click', loginWithGoogle);
btnSignup.addEventListener('click', signup);
// 新增其他社交按钮的点击事件绑定
btnFacebook.addEventListener('click', loginWithFacebook);
btnGithub.addEventListener('click', loginWithGithub);
btnLinkedin.addEventListener('click', loginWithLinkedin);

注意事项 #

• 后台启用社交连接时，必须在连接设置的「Applications」标签页下勾选当前使用的自定义登录页对应的应用，否则调用时会返回连接不可用错误。
• 若使用非默认配置的社交连接、自定义社交连接，可进入Auth0后台对应连接的设置详情页，浏览器地址栏最后一段路径即为准确的connection参数值，直接替换代码中对应位置即可，无需硬记默认名称。
• 无需修改webAuth实例初始化的配置逻辑，模板中的@@config@@占位符会在页面渲染时自动注入当前租户下所有已授权连接的配置信息，只要connection参数正确即可正常跳转授权流程。

内容的提问来源于stack exchange，提问作者Gabriel