Как мобильный разработчик на определенном этапе вам придется реализовать стратегию OAuth 2 с помощью социальных сетей или других средств.
Эта статья не объясняет, что такое Oauth 2 и как он работает, поскольку в Интернете есть множество статей по этому поводу.
Вопрос в том, следует ли мне использовать Oauth 2 на стороне клиента или на стороне сервера?
Сторона клиента
Есть несколько пакетов вроде:
response-native-oauth, см. репозиторий здесь.
response-native-simple-auth см. репозиторий здесь.
Я пробовал некоторые из этих пакетов, в которых есть минусы и плюсы
Плюсы:
- Это пакеты с открытым исходным кодом.
- Есть много примеров реализации.
- Легко реализовать (не все пакеты).
Минусы:
- Сопровождение пакетов.
- Дополнительная конфигурация для URI перенаправления.
- Нет клиентского контроля.
- Невозможно получить доступ к данным, возвращаемым из обратного вызова OAuth 2, напрямую с сервера.
На стороне сервера
Реализация на стороне сервера более безопасна и управляема.
Начнем нашу демонстрацию:
Для клиента мы будем использовать response-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.
а - Перейдите и войдите в: https://console.developers.google.com/
б - Создать новый проект
c - После создания выберите проект oauth2demo и перейдите к учетным данным
г - Нажмите «Создать учетные данные» и выберите «Идентификатор клиента Oauth».
e - Настройте экран согласия, выберите внешний и следуйте инструкциям по созданию идентификатора клиента Oauth2.
f - Настроить авторизованные источники JavaScript: поскольку мы используем мобильное приложение локально, у нас нет прямого доступа к localhost, поэтому в этом случае мы будем использовать pagekite для внешнего доступа к нашему серверу, добавив: http://42music.pagekite.me (Здесь добавьте свой собственный URL)
Более подробную информацию о пейдж-кайте можно найти здесь.
g - Настройка авторизованных URI перенаправления: add: 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:
a - Запустите приложение с поддержкой реакции на виртуальном или физическом устройстве.
б - в App.js создать кнопку для google OAuth 2 со ссылкой на: http://42music.pagekite.me / auth / goog файл
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 - После того, как Google OAuth2 будет успешным, нам нужно перенаправить пользователя в наше приложение, и для этого мы будем использовать встроенные прямые ссылки.
В ./android/app/src/main/AndroidManifest.xml добавьте фильтр намерений
<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);
Введите пароль и затем подключитесь
Вы можете использовать тот же метод для реализации других стратегий.
Исходный код здесь.
