如何将react原生应用程序与spring boot oauth2集成

spring:
  security:
    oauth2:
      client:
        registration:
          my-client:
            client-id: your-client-id
            client-secret: your-client-secret
            scope: read,write
            redirect-uri: http://localhost:3000/login/oauth2/code/my-client
            authorization-grant-type: authorization_code
        provider:
          my-provider:
            authorization-uri: http://localhost:8080/oauth/authorize
            token-uri: http://localhost:8080/oauth/token
            user-info-uri: http://localhost:8080/userinfo

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/oauth/**", "/login/**").permitAll()
                .anyRequest().authenticated()
                .and()
            .oauth2Login();
    }
}

npm install react-oauth2-hook

import React, { createContext, useContext } from 'react';
import { useOAuth2 } from 'react-oauth2-hook';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
    const { auth, login, logout } = useOAuth2({
        clientId: 'your-client-id',
        authorizationUri: 'http://localhost:8080/oauth/authorize',
        redirectUri: 'http://localhost:3000/login',
        scope: 'read write',
    });

    return (
        <AuthContext.Provider value={{ auth, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
};

export const useAuth = () => useContext(AuthContext);

import React from 'react';
import { useAuth } from './AuthProvider';

const App = () => {
    const { auth, login, logout } = useAuth();

    return (
        <div>
            {auth ? (
                <div>
                    <h1>Welcome!</h1>
                    <button onClick={logout}>Logout</button>
                </div>
            ) : (
                <button onClick={login}>Login</button>
            )}
        </div>
    );
};

export default App;

import React, { useEffect } from 'react';
import { useAuth } from './AuthProvider';

const Callback = () => {
    const { login } = useAuth();

    useEffect(() => {
        // 处理 OAuth2 回调
        login();
    }, [login]);

    return <div>Loading...</div>;
};

export default Callback;