반응형
https://github.com/lnjky/fashion_people
GitHub - lnjky/fashion_people: 패션 추천 어플
패션 추천 어플. Contribute to lnjky/fashion_people development by creating an account on GitHub.
github.com
코드 전체를 보려면 위에 링크를 통해 확인할 수 있습니다.
SNS어플을 사용하는 방법은 2가지가 있다.
첫번쨰로는 회원가입 후 로그인을 통해 게시글, 댓글, 사진 등을 올리는 방법이 있고
두번째로는 어플을 킬때마다 익명의 아이디로 게시글, 댓글을 작성하는 방법이 있다.
익명을 사용하는 것은 나름 장점이 있지만 나는 회원가입을 통해 아이디를 만들고 SNS를 활용할 수 있는 방식을 선택했다.
일단 로그인을 하기 위해서는 회원가입이 필요하다.
감사하게도 파이어베이스에는 Authentication이라고 회원가입을 지원해준다.
일단 소개하기 전 해당 링크를 통해 파이어베이스를 연동하는 방법을 알고 있어야 한다.
[안드로이드] 파이어베이스 - 안드로이드 스튜디오 연결
https://github.com/lnjky/fashion_people GitHub - lnjky/fashion_people: 패션 추천 어플 패션 추천 어플. Contribute to lnjky/fashion_people development by creating an account on GitHub. github.com 코드 전체를 보려면 위에 링크를 통해
loasd.tistory.com
연결하는 내용은 해당 링크를 통해 하길 바란다.
여기까지 했다면 준비는 끝났고 먼저 XML을 간단히 설명하겠다.
XML은 우선 이렇게 간단하게 만들었다.
Authentication에 등록하기 위해서는 아이디, 비밀번호만 있으면 되지만 추가적으로 닉네임, 나이도 넣어주기로 했다.
Edit Text를 통해 값을 입력받고 회원가입을 클릭시 회원가입이 될 것이다.
XML을 만드는 것은 간단하기 때문에 간단히 코드를 첨부하고 넘어가도록 한다.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#B388FF"
tools:context=".RegisterActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="68dp"
android:text="회원가입"
android:textColor="@color/black"
android:textSize="45dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</TextView>
<EditText
android:id="@+id/et_register_id"
android:layout_width="230dp"
android:layout_height="30dp"
android:layout_marginTop="220dp"
android:background="@drawable/edit_bg"
android:ems="10"
android:hint=" E-mail"
android:inputType="textEmailAddress"
android:paddingLeft="5dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.497"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<EditText
android:id="@+id/et_register_pw"
android:layout_width="230dp"
android:layout_height="30dp"
android:layout_marginTop="36dp"
android:background="@drawable/edit_bg"
android:ems="10"
android:hint=" PASSWORD"
android:inputType="textPersonName"
android:paddingLeft="5dp"
app:layout_constraintEnd_toEndOf="@+id/et_register_id"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/et_register_id"
app:layout_constraintTop_toBottomOf="@+id/et_register_id" />
<EditText
android:id="@+id/et_register_nickname"
android:layout_width="230dp"
android:layout_height="30dp"
android:layout_marginTop="36dp"
android:background="@drawable/edit_bg"
android:ems="10"
android:hint=" NICKNAME"
android:inputType="textPersonName"
android:paddingLeft="5dp"
app:layout_constraintEnd_toEndOf="@+id/et_register_pw"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/et_register_pw"
app:layout_constraintTop_toBottomOf="@+id/et_register_pw" />
<TextView
android:id="@+id/tv_register_age"
android:layout_width="wrap_content"
android:layout_height="15dp"
android:layout_marginTop="20dp"
android:text="나이"
android:textColor="@color/black"
android:textSize="11dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.251"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_register_nickname">
</TextView>
<TextView
android:id="@+id/tv_register_pw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="비밀번호"
android:textColor="@color/black"
android:textSize="11dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.256"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_register_id">
</TextView>
<TextView
android:id="@+id/tv_register_nickname"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="닉네임"
android:textColor="@color/black"
android:textSize="11dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/et_register_pw">
</TextView>
<TextView
android:id="@+id/tv_register_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="204dp"
android:text="아이디"
android:textColor="@color/black"
android:textSize="11dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.25"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</TextView>
<EditText
android:id="@+id/et_register_age"
android:layout_width="230dp"
android:layout_height="30dp"
android:layout_marginTop="36dp"
android:background="@drawable/edit_bg"
android:ems="10"
android:hint=" AGE"
android:inputType="textPersonName"
android:paddingLeft="5dp"
app:layout_constraintEnd_toEndOf="@+id/et_register_nickname"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/et_register_nickname"
app:layout_constraintTop_toBottomOf="@+id/et_register_nickname" />
<Button
android:id="@+id/btn_register_button"
android:layout_width="230dp"
android:layout_height="35dp"
android:layout_marginTop="36dp"
android:background="@drawable/button_round"
android:foreground="?attr/selectableItemBackgroundBorderless"
android:text="회원가입"
app:layout_constraintEnd_toEndOf="@+id/et_register_age"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/et_register_age"
app:layout_constraintTop_toBottomOf="@+id/et_register_age" />
</androidx.constraintlayout.widget.ConstraintLayout>
다음은 코드이다.
우선 파이어베이스의 Authentication과 연결하기 위해서는 아래의 코드를 선언해줘야 한다.
private FirebaseAuth mAuth = FirebaseAuth.getInstance();그리고 XML에서 만든 객체들과 연결해주어야 한다.
private EditText et_register_id, et_register_pw, et_register_age, et_register_nickname;
private Button btn_register_button;
et_register_id = findViewById(R.id.et_register_id);
et_register_pw = findViewById(R.id.et_register_pw);
et_register_nickname = findViewById(R.id.et_register_nickname);
et_register_age = findViewById(R.id.et_register_age);
btn_register_button = findViewById(R.id.btn_register_button);이렇게 연결해주면 된다.
그리고 버튼에 OnClickListener를 연결해준다.
findViewById(R.id.btn_register_button).setOnClickListener(this);이렇게 선언하거나 아니면
btn_register_button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
}
});이런식으로 연결해서 사용해도 되는데 코드가 길어서 위의 방법으로 작성하였다.
그 후 Oncreate 밖에 Onclick을 생성해준다.
전체 코드는 다음과 같다.
@Override
public void onClick(View view) {
final String email = et_register_id.getText().toString().trim();
final String password = et_register_pw.getText().toString().trim();
final String nickname = et_register_nickname.getText().toString().trim();
final String age = et_register_age.getText().toString().trim();
if ((email != null) && !email.isEmpty() && (password != null) && !password.isEmpty() && (nickname != null) && !nickname.isEmpty() && (age != null) && !age.isEmpty() ) {
mAuth.createUserWithEmailAndPassword(et_register_id.getText().toString(), et_register_pw.getText().toString())
.addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
if (task.isSuccessful()) {
// Sign in success, update UI with the signed-in user's information
FirebaseUser user = mAuth.getCurrentUser();
Map<String, Object> userMap = new HashMap<>();
userMap.put(FirebaseID.documentId, user.getUid());
userMap.put(FirebaseID.email, email);
userMap.put(FirebaseID.password, password);
userMap.put(FirebaseID.nickname, nickname);
userMap.put(FirebaseID.age, age);
//현재 유저의 Uid를 이름으로 한 document 생성. 이게 없으면 사용자 컨텐츠의 이륾과 사용자id이름이 달라 사용하기 힘듬
mStore.collection(FirebaseID.user).document(user.getUid()).set(userMap, SetOptions.merge());
//회원가입 성공시 로그인 액티비티로 화면 전환
Intent intent = new Intent(RegisterActivity.this, LoginActivity.class);
startActivity(intent);
finish();
} else {
// If sign in fails, display a message to the user.
Toast.makeText(RegisterActivity.this, "회원가입 실패",
Toast.LENGTH_SHORT).show();
}
}
});
}
}차근차근 설명해보자면 이렇다.
먼저 각각의 변수에 Edit Text에 들어간 값을 입력해준다.
final String email = et_register_id.getText().toString().trim();
final String password = et_register_pw.getText().toString().trim();
final String nickname = et_register_nickname.getText().toString().trim();
final String age = et_register_age.getText().toString().trim();
그리고 if문을 통해 각각의 값들이 비어있지 않아야 하게 한다.
if ((email != null) && !email.isEmpty() && (password != null) && !password.isEmpty() && (nickname != null)
&& !nickname.isEmpty() && (age != null) && !age.isEmpty() )그리고 아래의 코드를 작성해준다.
조금만 입력해도 아래에 자동완성이 뜨기 때문에 간단히 작성할 수 있다.
mAuth.createUserWithEmailAndPassword(et_register_id.getText().toString(), et_register_pw.getText().toString())
.addOnCompleteListener(this, new OnCompleteListener<AuthResult>() {
@Override
public void onComplete(@NonNull Task<AuthResult> task) {
if (task.isSuccessful()) {
// Sign in success, update UI with the signed-in user's information
} else {
// If sign in fails, display a message to the user.
}
}
});
}아마 자동완성 하면 이렇게 뜰것이다.
사실 이렇게만 해도 회원가입이 완료된다. 그러나 회원정보를 보다 쉽게 사용하기 위해 파이어스토어를 사용하기로 했다.
파이어 스토어를 사용하기 위해서는 아래의 코드를 통해 인스턴스를 연결해줘야 한다.
private FirebaseFirestore mStore = FirebaseFirestore.getInstance();그리고 if절 안에 회원가입시 작동할 코드를 작성해주고
else절에는 회원가입에 실패했을 때 어떻게 작동할 것인지 입력하면 된다.
if (task.isSuccessful()) {
// Sign in success, update UI with the signed-in user's information
FirebaseUser user = mAuth.getCurrentUser();
Map<String, Object> userMap = new HashMap<>();
userMap.put(FirebaseID.documentId, user.getUid());
userMap.put(FirebaseID.email, email);
userMap.put(FirebaseID.password, password);
userMap.put(FirebaseID.nickname, nickname);
userMap.put(FirebaseID.age, age);
//현재 유저의 Uid를 이름으로 한 document 생성. 이게 없으면 사용자 컨텐츠의 이륾과 사용자id이름이 달라 사용하기 힘듬
mStore.collection(FirebaseID.user).document(user.getUid()).set(userMap, SetOptions.merge());
//회원가입 성공시 로그인 액티비티로 화면 전환
Intent intent = new Intent(RegisterActivity.this, LoginActivity.class);
startActivity(intent);
finish();
} else {
// If sign in fails, display a message to the user.
Toast.makeText(RegisterActivity.this, "회원가입 실패",Toast.LENGTH_SHORT).show();Map을 만들고 데이터를 담아주었다.
여기서 put(FirebaseID.documentID) 이는 자주 사용하는 것들을 따로 클래스파일로 선언해두었다.
상단의 깃허브 주소에 들어가서 소스코드를 보면 Utility 폴더에 아래의 코드처럼 작성해 놓은 것을 볼 수 있다.
public으로 선언하여 어디서든 사용할 수 있기 때문에 매우 편리하다.
이렇게 작성해두면 나중에 오타가 생기거나 잘못 작성하는 실수를 줄일 수 있기 때문에 자주 사용하는 변수나 단어가 있다면 이렇게 만들어두고 사용하면 좋다.
package com.example.styleplt.utility;
public class FirebaseID {
public static String user = "user";
public static String post = "post";
public static String upload = "upload";
public static String title = "title";
public static String contents = "contents";
public static String comments = "comments";
public static String documentId = "documentId";
public static String email = "email";
public static String password = "password";
public static String age = "age";
public static String nickname = "nickname";
public static String timestamp = "timestamp"; // 댓글 작성 시간 표기용
public static String time = "time"; // 댓글 정렬을 위한 서버시간을 파이어스토어에 저장
public static String collectionId = "collectionId";
public static String image = "image";
public static String uploadRating = "uploadRating"; // 파이어스토어 컬렉션 이름
public static String rating = "rating"; // 파이어스토어 도큐먼트 이름 ( float )
public static String ratingcount = "ratingcount"; // 파이어스토어 내에 몇명이 평가했는지 확인
public static String save = "save"; // 찜목록 collection 이름
}
다시 본론으로 돌아와서 Map에 입력한 데이터들을 아래의 코드를 통해 파이어스토어에 저장해준다.
mStore.collection(FirebaseID.user).document(user.getUid()).set(userMap, SetOptions.merge());이렇게 되면 파이어스토어 탭에 user - "user id"(랜덤) 이렇게 컬렉션 - 도큐먼트가 생성된 것을 확인할 수 있다.
그 후 Intent를 통해 로그인 화면으로 전환된다.
Intent에 대한 자세한 설명은 아래 링크를 통해 확인 바란다.
[안드로이드] Intent
https://github.com/lnjky/fashion_people GitHub - lnjky/fashion_people: 패션 추천 어플 패션 추천 어플. Contribute to lnjky/fashion_people development by creating an account on GitHub. github.com 코드 전체를 보려면 위에 링크를 통해
loasd.tistory.com
간단히 회원가입을 만드는 방법에 대해 알아보았다.
잘못 작성된 부분이나 모르는 부분, 빠진 부분이 있다면 댓글에 남겨주시면 수정하거나 최대한 설명해드리겠습니다.
반응형
'안드로이드' 카테고리의 다른 글
| [안드로이드] 파이어베이스 / 로그아웃 만들기 (0) | 2023.01.03 |
|---|---|
| [안드로이드] 파이어베이스 / 로그인 만들기 (1) | 2023.01.03 |
| [안드로이드] Intent (0) | 2023.01.02 |
| [안드로이드] Fragment에서의 findViewById() (0) | 2022.12.22 |
| [안드로이드] 파이어베이스 - 안드로이드 스튜디오 연결 (0) | 2022.12.22 |