Учебники

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

Декабрь 4, 2018

В этой главе мы будем аутентифицировать пользователей с помощью аутентификации Firebase Facebook.

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

Нам нужно открыть панель инструментов Firebase и щелкнуть Auth в боковом меню. Далее нам нужно выбрать SIGN-IN-METHOD на панели вкладок. Мы включим аутентификацию Facebook и оставим ее открытой, так как нам нужно добавить App ID и App Secret, когда мы закончим шаг 2.

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

Чтобы включить аутентификацию Facebook, нам нужно создать приложение Facebook. Нажмите на эту ссылку, чтобы начать. После создания приложения нам нужно скопировать идентификатор приложения и секрет приложения на страницу Firebase, которую мы оставили открытой на шаге 1. Нам также нужно скопировать URI перенаправления OAuth из этого окна в приложение Facebook. Вы можете найти + Добавить продукт в боковом меню панели инструментов приложения Facebook.

Выберите Facebook Login, и он появится в боковом меню. Вы найдете поле ввода Valid OAuth Redirect URI, куда нужно скопировать UA Redirect Redirect из Firebase.

Шаг 3 — Подключение к Facebook SDK

Скопируйте следующий код в начале тега body в index.html . Обязательно замените «APP_ID» на идентификатор своего приложения на панели инструментов Facebook.

пример

Давайте рассмотрим следующий пример. 

<script>
   window.fbAsyncInit = function() {
      FB.init ({
         appId      : 'APP_ID',
         xfbml      : true,
         version    : 'v2.6'
      });
   };

   (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
   } (document, 'script', 'facebook-jssdk'));
	
</script>

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

Мы установили все в первые три шага, теперь мы можем создать две кнопки для входа и выхода.

index.html 

<button onclick = "facebookSignin()">Facebook Signin</button>
<button onclick = "facebookSignout()">Facebook Signout</button>

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

Это последний шаг. Откройте index.js и скопируйте следующий код.

42
Share: