dioxus google login
Google 로그인 기능을 Dioxus 애플리케이션에 통합하는 과정을 더 상세하게 설명드리겠습니다. 이 과정은 WebAssembly를 활용하여 JavaScript SDK를 Rust로 호출하고, 그 결과를 Dioxus에서 처리하는 방식입니다.
전체 단계 요약
- Google 로그인 SDK를 HTML에 추가
- Dioxus 프로젝트 설정 및 WebAssembly 환경 설정
- Rust에서 Google 로그인 처리 및 JavaScript와의 상호작용 설정
- Google 로그인 성공 후, 사용자 정보를 표시하는 방법
1. Google 로그인 SDK를 HTML에 추가
먼저, Google 로그인 SDK를 HTML에 추가해야 합니다. 이 SDK는 로그인 버튼을 생성하고, 로그인 절차를 처리하는 데 사용됩니다.
HTML 파일 설정
HTML 파일에서 Google 로그인 SDK를 로드하고, 로그인 버튼을 위한 div 요소를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dioxus Google Login</title>
<!-- Google 로그인 SDK 로드 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<h1>Google Login Example with Dioxus</h1>
<!-- Google 로그인 버튼이 들어갈 div -->
<div id="google-signin-button"></div>
<script type="module">
import { initGoogleLogin } from './pkg/dioxus_google_login.js';
window.onload = () => {
initGoogleLogin(); // Dioxus에서 Google 로그인 초기화
};
</script>
</body>
</html><script src="https://apis.google.com/js/platform.js" async defer></script>: Google 로그인 SDK를 로드합니다.<div id="google-signin-button"></div>: 이 div 요소는 Google 로그인 버튼이 렌더링될 위치입니다.
2. Dioxus 프로젝트 설정 및 WebAssembly 환경 설정
이제 Dioxus 애플리케이션을 설정하고, WebAssembly에서 Google 로그인 SDK를 사용하도록 준비합니다.
Dioxus 프로젝트 생성
터미널에서 Dioxus 프로젝트를 생성합니다.
cargo new --lib dioxus_google_login
cd dioxus_google_loginCargo.toml 설정
Cargo.toml 파일에서 WebAssembly 및 Dioxus 관련 의존성을 추가합니다. wasm-bindgen과 dioxus를 사용할 것입니다.
[dependencies]
wasm-bindgen = "0.2"
dioxus = "0.3"
web-sys = { version = "0.3", features = ["window", "Document", "Element"] }
[lib]
crate-type = ["cdylib"]wasm-bindgen: WebAssembly에서 JavaScript와 상호작용할 수 있게 해주는 라이브러리입니다.web-sys: Web API를 사용하기 위한 라이브러리입니다. 이를 통해document,window,Element등의 DOM을 다룰 수 있습니다.dioxus: Dioxus 프레임워크를 사용하여 UI를 구성합니다.
3. Rust에서 Google 로그인 처리 및 JavaScript와의 상호작용 설정
이제 Rust 코드를 작성하여 JavaScript SDK와 상호작용하도록 설정합니다.
main.rs 작성
src/lib.rs 파일을 열고, wasm-bindgen을 사용하여 JavaScript SDK와의 상호작용을 처리하는 함수를 작성합니다.
use wasm_bindgen::prelude::*;
use web_sys::{window, HtmlElement};
#[wasm_bindgen]
extern "C" {
// Google API 초기화 함수
fn gapi_init();
// Google 로그인 함수
fn gapi_sign_in();
}
#[wasm_bindgen]
pub fn init_google_login() {
// Google API 초기화 호출
gapi_init();
// Google 로그인 버튼 클릭 시 로그인 기능 실행
let document = window().unwrap().document().unwrap();
let sign_in_button = document
.get_element_by_id("google-signin-button")
.unwrap()
.dyn_into::<HtmlElement>()
.unwrap();
sign_in_button.set_onclick(Some(&gapi_sign_in)); // 클릭 시 gapi_sign_in 호출
}gapi_init(): JavaScript에서 정의된gapi.init()함수입니다. 이를 통해 Google 로그인 SDK를 초기화합니다.gapi_sign_in(): 로그인 버튼이 클릭되었을 때 호출되는 함수입니다. 이 함수는 사용자가 로그인할 수 있도록 Google 로그인 창을 표시합니다.window()와document():web-sys를 사용하여 DOM 요소를 가져오고, 클릭 이벤트를 설정합니다.
JavaScript SDK와의 상호작용을 위한 설정
이 부분은 JavaScript에서 Google 로그인 처리를 위해 필요한 콜백 함수입니다. 로그인 성공 시 사용자 정보를 가져오는 방법을 설정합니다.
// gapi_sign_in 함수 (JavaScript)
function gapi_sign_in() {
gapi.auth2.getAuthInstance().signIn().then(function(googleUser) {
const profile = googleUser.getBasicProfile();
const userName = profile.getName();
const userEmail = profile.getEmail();
console.log('User Name:', userName);
console.log('User Email:', userEmail);
});
}이 함수는 Google 로그인 SDK에서 제공하는 API를 호출하여 사용자가 로그인한 후 기본 프로필 정보를 가져옵니다.
4. Google 로그인 성공 후, 사용자 정보를 표시하는 방법
로그인에 성공하면, 사용자 정보를 화면에 표시할 수 있습니다. gapi_sign_in 함수 내에서 로그인 정보를 받아와서 화면에 출력합니다.
사용자 정보 표시
로그인 성공 후 사용자 정보를 출력하는 방법은 Rust에서 JavaScript로 정보를 전달하고 이를 UI에 반영하는 방식입니다.
우리는 로그인된 사용자 이름과 이메일을 Dioxus 컴포넌트에 전달하여 화면에 표시할 수 있습니다. 아래는 간단한 예시입니다.
- Rust에서 사용자 정보를 전달
use dioxus::prelude::*;
#[derive(Props)]
struct GoogleLoginProps {
user_name: String,
user_email: String,
}
fn google_login_component(cx: Scope, props: GoogleLoginProps) -> Element {
cx.render(rsx! {
div {
h2 { "User Info" }
p { "Name: {props.user_name}" }
p { "Email: {props.user_email}" }
}
})
}- JavaScript에서 사용자 정보를 가져와 Rust로 전달
gapi_sign_in 함수에서 사용자 정보를 가져온 후, WebAssembly로 전달하여 화면에 출력할 수 있습니다.
function gapi_sign_in() {
gapi.auth2.getAuthInstance().signIn().then(function(googleUser) {
const profile = googleUser.getBasicProfile();
const userName = profile.getName();
const userEmail = profile.getEmail();
// Rust로 사용자 정보 전달
window.external.push_user_info(userName, userEmail);
});
}이렇게 하면, 로그인 성공 후 JavaScript에서 사용자 정보를 가져와 Rust 애플리케이션에 전달하여 화면에 표시할 수 있습니다.
5. 빌드 및 실행
이제 프로젝트를 빌드하고, 로컬 서버에서 실행하여 결과를 확인할 수 있습니다.
빌드
wasm-pack build --target web로컬 서버에서 실행
npx http-server이제 http://localhost:8080에서 애플리케이션을 열고, Google 로그인 버튼을 클릭하여 로그인 후 사용자 정보를 확인할 수 있습니다.
결론
이 예시에서는 Dioxus와 WebAssembly를 활용하여 Google 로그인 SDK를 사용하고, 그 결과를 Rust로 가져오는 방법을 설명했습니다. Google 로그인 SDK를 JavaScript로 처리하고, 이를 WebAssembly에서 호출하여 로그인 버튼을 처리하고 결과를 화면에 표시할 수 있습니다.
Dioxus와 WebAssembly를 사용한 프로젝트에서는 JavaScript와 Rust 간의 상호작용이 중요하므로, wasm-bindgen을 잘 활용해야 합니다.
