[RN]ログインとJWT

🖥 検証プロセス

Client->サーバへの認証データの転送

サーバ->セッション検証データを格納し、セッションキーをクライアントに返す

モバイルアプリケーションの場合
サーバがクライアントの認証を管理しない
トークンを使う!!!
1.モバイルapp->認証データの送信
2.サーバ->秘密鍵を作成し、トークンをモバイルアプリケーションに返す
3.redux storge上のトークンストレージ+アプリケーション実行中はRidexが管理する
🖥 ログイン

シンプルパスワード->6ビット

<TextInput
                        keyboardType="number-pad"
                        maxLength={6}
                        
                        style={authStyles.contentInput}
                        placeholder="PassWord"
                        numberOfLines={1}
                        secureTextEntry
                        onChangeText={inputPw => setPassword(inputPw)}
                    />

📍 ライブラリの使用

accessToken、refreshToken、user接続時に使用するように実現

reduxに格納され、アプリケーションを実行するたびにデータが初期化されるため、適切ではありません

AsyncStorage
これを使用して、デバイスのハードディスク(HDD)にデータを格納します.

npm i @react-native-community/async-storage

📍 実装機能
1.自動ログインまたはログイン拒否!

SplashScreenは、デバイスのハードディスク(HDD)にuserが含まれているかどうかを確認します.

が値の場合Main,

ない場合はAuthに切り替えます.

root/SplashScreen.js

import React, { useState, useEffect } from 'react';
import Splash from './containers/auth/Splash'
import { View} from 'react-native';

function SplashScreen({ navigation }) {
    return (
        <View >
            <Splash navigation={navigation} />
        </View>
    )
}

export default SplashScreen;

root/src/containers/auth/Splash.js

import Splash from '../../components/auth/Splash';
import { connect } from 'react-redux';
import { autoLogin } from '../../store/actions/userAction';


function mapReduxStateToReactProps(state) {
    return state;
}

function mapReduxDispatchToReactProps(dispatch) {
    return {
        goMain: function (dataToSubmit) {
            dispatch(autoLogin(dataToSubmit));
        }
    }
}

export default connect(mapReduxStateToReactProps, mapReduxDispatchToReactProps)(Splash);

root/src/components/Splash.js

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-community/async-storage';
import { View, Text } from 'react-native';

import { connect } from 'react-redux';
import { autoLogin } from '../../store/actions/userAction';

function Splash(props) {

    useEffect(() => {
        setTimeout(() => {
            AsyncStorage.getItem('user')
                .then((value) => {
                    console.log(value)
                    if (value != null) {
                        props.goMain(value)

                        props.navigation.replace('Main');

                    } else {
                        props.navigation.replace('Auth');
                        console.log(value);

                    }
                }
                );

        }, 3000);
    }, []);

    return (
        <View >
            <Text>스플래쉬 화면</Text>
        </View>
    )
}


export default Splash;

AsyncStorage.getItem(「user」)の値がある場合は、
値がない場合は、ログイン画面に移動します.

root/App.js

const App = () => {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Splash">
          <Stack.Screen name="Splash" component={SplashScreen} />
          <Stack.Screen name="Auth" component={AuthStackScreen}
            options={{ headerShown: false }}
          />
          <Stack.Screen name="Main" component={MainTabScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </Provider>
  );
};
export default App;

2.ログイン-トークン

ログイン時、id,passwordbodyに入れるpost

サーバ発行accessToken、refreshToken

フロントエンド非同期ストレージに格納

actions/authAction.js

export function login(dataToSubmit) {

    const data = request("POST", USERS_URL + "/login", dataToSubmit);
    // data: {
    //     accessToken,
    //     refreshToken,
    //   }
    return {
        type: types.LOGIN,
        payload: data,
        uniqueId: dataToSubmit.id
    }

};

reducers/auth.js

case types.LOGIN:
            console.log(action.uniqueId)
            AsyncStorage.multiSet([
                ['accessToken', action.data.accessToken],
                ['refreshToken', action.data.refreshToken],
                ['uniqueId', action.uniqueId]
            ])

            return {
                ...state,
                uniqueId: action.uniqueId
            }