Статьи

Войдите в Firebase с Facebook, используя Ionic Framework

Сентябрь 28, 2017

 Я подумал, что, чтобы продолжить изучение моих руководств по  Firebase  и  Ionic Framework , было бы круто войти в приложение Firebase с помощью учетной записи в социальной сети, такой как Facebook?

Изначально Firebase и AngularFire предлагают несколько изящных методов аутентификации, однако они не работают должным образом, когда речь идет о мобильных гибридных приложениях, и я объясню почему.

Если вы были в ногу со своими учебниками, вы знаете , что мое  TODO приложение Firebase ,  Firebase менеджер паролей приложение , и  Firebase изображения загрузчика приложения  все сделает использование имени пользователя и пароль аутентификации. Но что, если мы хотим аутентифицировать по-другому? Мы посмотрим, как в мгновение ока.

Поскольку мы планируем использовать Ionic Framework, имеет смысл только добавить расширение AngularJS  AngularFire . В этой библиотеке представлены следующие возможные методы аутентификации:

$authWithCustomToken(authToken[, options]);
$authAnonymously([options]);
$authWithPassword(credentials[, options]);
$authWithOAuthPopup(provider[, options]);
$authWithOAuthRedirect(provider[, options]);
$authWithOAuthToken(provider, credentials[, options]);

На первый взгляд вы можете подумать, ну почему бы нам не использовать  $authWithOAuthPopup или  $authWithOAuthRedirect. Это два метода, которые будут работать только в браузере.

Вместо этого мы можем использовать  $authWithOAuthToken в сочетании с библиотекой AngularJS oauth, которую я написал, под названием  ng-cordova-oauth,  найденной на GitHub. Да, я  также добавляю исходный код в официальную  библиотеку ngCordova , так что вы можете использовать ее, если хотите. Если вы хотите узнать больше об этой библиотеке, вы можете посетить мой  предыдущий учебник  по этой теме.

Давайте продолжим и начнем новый Ionic-проект, и я объясню, почему мы идем по этому пути.

ionic start IonicApp blank
cd IonicApp
ionic platform add android
ionic platform add ios

Помните, что если вы не используете Mac, вы не можете добавлять и собирать для платформы iOS.

Теперь, чтобы использовать нашу библиотеку oauth, нам нужно установить   плагин Apache Cordova InAppBrowser, который позволит нам получать доступ к веб-сайтам, внешним по отношению к нашему приложению. В этом случае веб-сайт будет потоком входа, который генерирует Facebook. В вашем терминале или командной строке выполните следующую команду:

cordova plugin add org.apache.cordova.inappbrowser

Теперь давайте начнем добавлять все наши библиотеки JavaScript. Загрузите последнюю версию Firebase JavaScript SDK и библиотеку AngularFire, а также ngCordovaOauth. Откройте www / index.html вашего проекта и добавьте эти библиотеки, как показано ниже:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="js/ng-cordova-oauth.min.js"></script>
        <script src="cordova.js"></script>
        <script src="js/firebase.js"></script>
        <script src="js/angularfire.min.js"></script>
        <script src="js/app.js"></script>
    </head>

Обратите внимание, что я добавил  ng-cordova-oauth.min.js выше  cordova.js. Это было не случайно. Если вы этого не сделаете, вы получите странные результаты.

Перетащите дальше в ваш файл www / index.html к  <ion-content> тегам и замените их на:

<ion-content ng-controller="ExampleController">
    <button class="button" ng-click="login()">Login to Firebase</button>
</ion-content>

Наше приложение собирается очень просто. Только кнопка на экране, которая позволит нам войти в Facebook, а также Firebase. Больше ничего.

Давайте завернем вещи. В вашем файле www / js / app.js измените его следующим образом:

var firebaseApp = angular.module('starter', ['ionic', 'firebase', 'ngCordovaOauth']);
var fb = new Firebase("https://INSTANCE_ID_HERE.firebaseio.com");

firebaseApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if(window.cordova && window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if(window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
});


firebaseApp.controller("ExampleController", function($scope, $firebaseAuth, $cordovaOauth) {

    var auth = $firebaseAuth(fb);

    $scope.login = function() {
        $cordovaOauth.facebook("FACEBOOK_APP_ID_HERE", ["email"]).then(function(result) {
            auth.$authWithOAuthToken("facebook", result.access_token).then(function(authData) {
                console.log(JSON.stringify(authData));
            }, function(error) {
                console.error("ERROR: " + error);
            });
        }, function(error) {
            console.log("ERROR: " + error);
        });
    }

});

По сути, мы добавили Firebase и ngCordovaOauth в наш модуль AngularJS, инициализировали Firebase и создали контроллер, отвечающий за вход пользователя. В вашей версии не забудьте поменять местами INSTANCE_ID_HERE с действительным именем Firebase и FACEBOOK_APP_ID_HERE с найденным ключом приложения. в вашей панели Facebook.

Итак, как именно мы используем oauth для аутентификации, когда мы не можем использовать   методы $authWithOAuthPopup или  $authWithOAuthRedirect? Мы используем  $cordovaOauth.facebook для получения токена доступа с помощью веб-потока, а затем передаем этот токен доступа в $authWithOAuthToken метод Firebase  . Затем Firebase проверит правильность вашего токена доступа.

Последнее, что мы хотим сделать, это убедиться, что Facebook включен в качестве допустимого параметра в разделе «Вход и авторизация» панели инструментов Firebase.

Вывод

При использовании ваших учетных записей социальных сетей для подключения к Firebase в приложении Ionic Framework вы определенно хотите использовать ngCordovaOauth или ngCordova для выполнения этой работы. С библиотекой вы можете использовать любого поставщика социальных сетей Firebase, поскольку все они существуют в библиотеке.

29
Share: