Учебники

Firebase — Github аутентификация

Декабрь 4, 2018

В этой главе мы покажем вам, как аутентифицировать пользователей с помощью GitHub API.

Шаг 1 — Включите аутентификацию GitHub

Откройте панель инструментов Firebase и нажмите « Auth» в боковом меню, а затем « SIGN-IN-METHOD» на панели вкладок. Вам необходимо включить аутентификацию GitHub и скопировать URL обратного вызова . Это понадобится на шаге 2. Вы можете оставить эту вкладку открытой, так как вам нужно будет добавить идентификатор клиента и секрет клиента после завершения шага 2.

Шаг 2 — Создание приложения Github

Перейдите по этой ссылке, чтобы создать приложение GitHub. Вам необходимо скопировать URL обратного вызова из Firebase в поле URL обратного вызова авторизации . Как только ваше приложение создано, вам нужно скопировать ключ клиента и секрет клиента из приложения GitHub в Firebase.

Шаг 3 — Создание кнопок

Мы добавим две кнопки в теге body .

index.html 

<button onclick = "githubSignin()">Github Signin</button>
<button onclick = "githubSignout()">Github Signout</button>

Шаг 4 — Создание функций авторизации

Мы создадим функции для входа и выхода внутри файла index.js .

index.js 

var provider = new firebase.auth.GithubAuthProvider();

function githubSignin() {
   firebase.auth().signInWithPopup(provider)
   
   .then(function(result) {
      var token = result.credential.accessToken;
      var user = result.user;
		
      console.log(token)
      console.log(user)
   }).catch(function(error) {
      var errorCode = error.code;
      var errorMessage = error.message;
		
      console.log(error.code)
      console.log(error.message)
   });
}

function githubSignout(){
   firebase.auth().signOut()
   
   .then(function() {
      console.log('Signout successful!')
   }, function(error) {
      console.log('Signout failed')
   });
}

Теперь мы можем нажать на кнопки, чтобы активировать аутентификацию. Консоль покажет, что аутентификация прошла успешно.

42
Share: