전체 글34 [React Native] 리액트 네이티브에서 네이버 로그인 구현하기 (@react-native-seoul/naver-login) 리액트 네이티브 (안드로이드, ios)에서 네이버 로그인을 하는 방법을 정리하고자 한다.우선 네이버 개발자센터에서 어플리케이션을 등록해야 한다. Application으로 이동하여 애플리케이션 등록을 선택한다. 앱 이름을 입력하고, 사용 API에서 네이버 로그인을 선택한다. 제공 정보를 선택할 수 있지만 필요하지 않으니 생략한다.아래 로그인 오픈 API 서비스 환경에서 안드로이드, iOS를 선택한다. 안드로이드다운로드 URL은 아직 배포 전이므로 https://localhost 등으로 입력한다.네이버 로그인은 타 소셜 로그인과 다르게 배포가 완료되어야 완벽하게 작동한다는 점을 참고한다. 우선 패키지명은 일반적인 경우 android/app/src/main/AndroidManifest.xml을 보면 알 수도.. 2024. 11. 14. [React Native] 리액트 네이티브에서 카카오 로그인 구현하기 (@react-native-seoul/kakao-login) 리액트 네이티브 (안드로이드, ios)에서 카카오 로그인을 하는 방법을 정리하고자 한다. 우선 카카오 로그인 방식에는 크게 웹뷰를 띄워 아이디, 비밀번호를 입력하는 Rest 방식과 카카오톡 어플을 실행하여 로그인하는 SDK 방식이 있다.모바일에서는 UX상 후자를 선호하므로 오늘은 후자에 대해서만 이야기할 것이다. 우선 카카오 디벨로퍼 사이트에서 프로젝트를 생성해야 한다. 내 애플리케이션으로 이동하여 애플리케이션 추가하기를 누른다. 앱 이름과 회사명, 카테고리를 입력하고 저장한다. 아이콘은 나중에 설정해도 된다. 안드로이드안드로이드 카카오 로그인을 구현할 때 가장 중요한 부분은 키 해시이다.디버깅 버전 키 해시, 릴리즈 버전 키 해시 이렇게 2개가 필요하고, 구글로그인을 구현한 경우에는 추가적으로 1개가.. 2024. 11. 13. [React] 리액트 배포 전 보안 설정 후 빌드 React로 개발이 끝나고 배포를 위해 가비아에서 도메인도 구매했고, aws Amplify를 이용하여 main 브랜치와 연결도 했다.이 과정은 나중에 언젠가... 머지만 하면 도메인에 올라가는 것은 맞는데, 개발 환경 그대로 올려도 되는 건가?다른 작업은 따로 필요하지 않는 것인가? 하는 의문이 들었다면,절대 안된다!개발 환경 그대로 배포하게 되면, 일반 사용자들도 개발자 도구를 통해 우리가 작성한 소스 코드와 콘솔 내역까지 모두 열람할 수 있다.Sources > Page, Console 코드는 당연히 지켜야 하고, 콘솔 또한 백엔드 API URL을 지키기 위해서 삭제할 필요가 있다. 1. Source우리의 소스 코드는 그대로 사이트에 올라가는 것이 아니다. 모듈 번들러를 거쳐 조각난 후에, jsx/t.. 2024. 9. 9. Public Key로 암호화된 Private Key Signature 검증하기 (jsrsasign) 이전 글(리액트 네이티브에서 지문 인식 구현하기)에서 지문 인식을 도입한 프로젝트는 서버가 없어 react native단에서 직접 pulbic key를 안전하게 저장해놨다가, signature를 받아 검증까지 해야 했다.이를 위해서 모듈 react-native-keychain과 jsrsasign을 사용하였다.여기서는 jsrsasign와 Buffer을 이용해 검증하는 과정을 기록한다.우선 필자는 서버를 잘 모른다. 백엔드 다뤄본 것이라고는 데이터베이스밖에 없는 것이다.그래서 많이 헤매었다... 필요한 모듈을 다운받자.npm i jsrsasign --savecd iOSpod installBuffer는 다운받지 않아도 된다. react-native-biometrics에서 createSignature 함수를 .. 2024. 8. 17. [React Native] 리액트 네이티브에서 keychain store 구현하기 (react-native-keychain) 이전 글(리액트 네이티브에서 지문 인식 구현하기)에서 지문 인식을 도입한 프로젝트는 서버가 없어 react native단에서 직접 pulbic key를 안전하게 저장해놨다가, signature를 받아 검증까지 해야 했다.이를 위해서 모듈 react-native-keychain과 jsrsasign을 사용하였다.여기서는 keychain만 기록한다.keychain은 asyncStorage와 비슷하게 작동하지 ios 기기의 keychain과 android 기기의 keystore에 저장되어 매우 안전하게 보관된다는 특징이 있다.간단해서 따로 설명할 건 없고 기록용이다.import * as Keychain from 'react-native-keychain'export const setItem = async (key.. 2024. 8. 16. [React Native] 리액트 네이티브에서 지문 인식 구현하기 (react-native-biometrics) 생체 인식은 사용자의 잠금 해제 과정을 훨씬 더 간단하고 안전하게 만들어준다.오늘은 react native에서 생체 인식을 사용하는 방법에 대해서 기록하고자 한다. 사용할 모듈은 react-native-biometrics이다.ios에서는 touch id와 face id를, android에서는 지문인식을 지원한다.생체 인식 기능의 구조는 다음과 같다. 출처 New in Android Samples: Authenticating to remote servers using the Fingerprint APINews and insights on the Android platform, developer tools, and events.android-developers.googleblog.com 이 사진으로는 잘 이.. 2024. 8. 14. 이전 1 2 3 4 ··· 6 다음
