wuyuedefeng / blogs

博客文章在issue中
5 stars 0 forks source link

Rails Github 授权登录 #84

Open wuyuedefeng opened 4 years ago

wuyuedefeng commented 4 years ago

配置

install gem omniauth-github

$ gem 'omniauth-github', github: 'omniauth/omniauth-github', branch: 'master'

github Aauth Apps注册应用, 获取到github_key(Client ID), github_secret(Client Secret) image

新建config/initializers/omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :github, $env['omniauth']['github_key'], $env['omniauth']['github_secret'], scope: 'email,profiles', provider_ignores_state: true
end

routes

mount_devise_token_auth_for 'User', at: 'auth', controllers: {
    omniauth_callbacks: 'authentication_rails/omniauth_callbacks'
  }

新建app/controllers/concerns/authentiaction_rails/omniauth_callbacks_controller.rb

module AuthenticationRails
  class OmniauthCallbacksController < DeviseTokenAuth::OmniauthCallbacksController
    protected

    # break out provider attribute assignment for easy method extension
    def assign_provider_attrs(user, auth_hash)
      if auth_hash['provider'] == 'github'
        user.assign_attributes({
           nickname: auth_hash['info']['nickname'],
           name: auth_hash['info']['name'],
           image: auth_hash['info']['image'],
           email: auth_hash['info']['email']
        })
      else
        super
      end
    end
  end
end

使用

前端点击GitHub授权登录执行

window.location.href = `${process.env.VUE_APP_API_ORIGIN}/auth/github?auth_origin_url=${process.env.VUE_APP_ORIGIN}/login`

github授权成功后会返回到${process.env.VUE_APP_ORIGIN}/login路由, 并携带query信息, 并保存到store.state.user.authInfo

{
  auth_token: "vxonu5aslCQPtr5Wxxno3g"
  blank: "true"
  client_id: "8lwk_AblE8qwiExxOZCd-g"
  config: ""
  expiry: "1596329597"
  uid: "7812631"
}

登录页请求服务器用户信息,并携带验证token

cusAxios.interceptors.request.use(config => {
  store.state.user.authInfo && Object.assign(config.headers, {
    'access-token': store.state.user.authInfo.auth_token,
    client: store.state.user.authInfo.client_id,
    uid: store.state.user.authInfo.uid
  })
  return config
}, error => {
  return Promise.reject(error)
})

至此,用户信息也已经获取到,用户登录完成

wuyuedefeng commented 1 year ago

github 授权登录流程资料