React-native удостоверяване с Google OAuth 2

Като мобилен разработчик на определен етап ще трябва да приложите OAuth 2 стратегия, като използвате социални медии или други средства.

Тази статия няма да обяснява какво е Oauth 2 или как работи, тъй като има изобилие от статии онлайн по този въпрос.

Въпросът е трябва ли да използвам Oauth 2 на клиента или на сървъра?

Клиентска страна

Има няколко пакета като:

react-native-oauth, вижте хранилището тук.

react-native-simple-auth вижте хранилището тук.

Опитах някои от тези пакети, където има минуси и плюсове

Професионалисти :

Това е пакет с отворен код.
Има много примери за изпълнение.
Лесен за внедряване (не всички пакети).

Минуси:

Поддръжка на пакета.
Допълнителна конфигурация за URI за пренасочване.
Без клиентски контрол.
Няма достъп до върнатите данни от обратно извикване на OAuth 2 директно от сървъра.

Сървърна страна

Внедряването на сървърната страна е по-сигурно и управляемо.

Нека започнем нашата демонстрация:

За клиента ще използваме react-native, а за страната на сървъра ще използваме NodeJs/ExpressJs.

1 — Създайте ново приложение за реакция:

npx react-native init AwesomeProject

Забележка: — Следвайте официалната документация за настройка на средата на Android/Ios тук.

2 — Създайте сървърен проект:

npx express-generator server

За повече информация относно ExpressJ отидете тук.

3 — Нека инсталираме паспортни пакети от страната на сървъра

npm i -save passport-google-oauth20 passport

Сега какво следва, ще трябва да конфигурираме извикване / обратно извикване на API за OAuth 2 в конзолата за разработчици на Google

a — Навигирайте и влезте в: https://console.developers.google.com/

b — Създайте нов проект

c — След като бъде създаден, изберете проект oauth2demo и отидете на идентификационни данни

d — Кликнете върху „Създаване на идентификационни данни“ и изберете „Oauth клиентски идентификатор“

e — Конфигурирайте екрана за съгласие, изберете външен и следвайте инструкциите за създаване на Oauth2 клиентски идентификатор.

f — Настройте оторизирани източници на JavaScript: тъй като използваме мобилно приложение локално, нямаме директен достъп до localhost, така че в този случай ще използваме pagekite, за да изложим сървъра си външно, добавете: http://42music.pagekite.me (Тук добавете свой собствен URL адрес)

За повече информация относно pagekite тук.

g — Настройте оторизирани URI адреси за пренасочване: добавете: http://42music.pagekite.me/auth/google/callback (Тук добавете свой собствен URL)

Запазете и вземете вашия ClientId и тайна, които ще използваме в сървъра с паспортна стратегия.

Сега нека конфигурираме сървъра: -

В app.js инициализирайте паспорта в експресното приложение

var passport = require('passport');
// Initialize passprt
app.use(passport.initialize());

- Настройте паспортната стратегия в /route/index.js

- Добавяне на паспорт serializeUser и deserializeUser

-Създайте маршрутите за обратното повикване

var express = require('express');
var router = express.Router();
var passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
passport.serializeUser((user, done) => {
done(null, user);
})
passport.deserializeUser((user, done) => {
done(null, user)
})
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
passport.use(new GoogleStrategy({
clientID: "", // Add your clientID
clientSecret: "", // Add the secret here
callbackURL: '/auth/google/callback'
}, (accessToken, refreshToken, profile, done) => {
done(null, profile, accessToken );
}))
// Googe Oauth2
router.get('/auth/google', passport.authenticate('google', {
scope: ['profile', 'email'],
}));
// Google Oauth2 callback url
router.get('/auth/google/callback', passport.authenticate('google'), (req, res, next) => {
res.redirect("msrm42app://msrm42app.io?id=" + req.user.id);
});
module.exports = router;

Демонстрация

Нека настроим нашето React-native приложение:

a — Стартирайте своето естествено приложение за реакция на виртуално или физическо устройство

b — в App.js създайте бутон за google OAuth 2 с връзка към: http://42music.pagekite.me/auth/google

import React, { useEffect, useState } from 'react';
import {
 SafeAreaView,
 StyleSheet,
 ScrollView,
 TouchableOpacity,
 Linking,
 View,
 Text,
 StatusBar,
} from 'react-native';
 
import {
 Header,
 Colors,
} from 'react-native/Libraries/NewAppScreen';
 
const App: () => React$Node = () => {
 const [data, setData] = useState("");
 
 const handleOpenURL = ({ url }) => {
   if (url.indexOf("?id") !== -1) {
     if (url)
       setData(url);
   }
 };
 
 useEffect(() => {
   // Your code here
   Linking.addEventListener('url', handleOpenURL);
 }, []);
 
 return (
   <>
     <StatusBar barStyle="dark-content" />
     <SafeAreaView>
       <ScrollView
         contentInsetAdjustmentBehavior="automatic"
         style={styles.scrollView}>
         <Header />
         <Text>
           {data === "" ? null : data}
         </Text>
         <View style={styles.body}>
           <TouchableOpacity style={styles.socialBtn}
             onPress={() => Linking.openURL('http://42music.pagekite.me/auth/google')}>
             <Text style={styles.buttonText} >
               {data === "" ? "Connect via Google" : "You are connected !"}</Text>
           </TouchableOpacity>
         </View>
       </ScrollView>
     </SafeAreaView>
   </>
 );
};
 
const styles = StyleSheet.create({
 body: {
   backgroundColor: Colors.white,
 },
 socialBtn: {
   margin: 30,
   backgroundColor: '#1f5c9e',
   paddingVertical: 10,
 },
 buttonText: {
   color: '#fff',
   fontWeight: 'bold',
   textAlign: 'center'
 },
});
 
export default App;

c — След като OAuth2 google е успешен, трябва да пренасочим потребителя към нашето приложение и за това ще използваме дълбоко свързване на react-native.

В ./android/app/src/main/AndroidManifest.xml добавете intent-filter

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.oauth2app">
<uses-permission android:name="android.permission.INTERNET" />
<application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
<intent-filter android:label="musicroom">
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="msrm42app" android:host="msrm42app.io" />
        </intent-filter>
      
      </activity> 
      
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>
</manifest>

d — в страната на сървъра, след като Oauth2 е успешен пренасочване към приложението:

res.redirect("msrm42app://msrm42app.io?id=" + req.user.id);

Въведете парола и след това се свържете

Можете да използвате същия метод за прилагане на други стратегии.

Изходният код тук.

React-native удостоверяване с Google OAuth 2

Клиентска страна

Сървърна страна

Подобни въпроси