【Twitter】Twitter OAuthでメールアドレスの第三者共有を許可する設定
メモ。
Twitter OAuth1.0a認証にて、メールアドレス認可を第三者に行いたい場合、下記のような設定が必要になります。
1. OAuth認証ページURLリクエストに include_email を含める
https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true
2. Developerアカウントダッシュボード App details でTerms of ServiceURL Privacy policy URL を設定する
3. Developerアカウントダッシュボード Permission で Additional permissions の Request email address from users を有効にする
以上です。
【npm/yarn】パッケージをダウングレードする
メモ。
npm では、パッケージのダウングレードを行う場合、一旦パッケージを削除してから再度インストールし直す必要があります。
$ npm remove cowsay $ npm install --save cowsay@1.0.0
yarn であれば、 yarn upgrade [パッケージ名]@[version] で指定したバージョンにそのままダウングレードしてくれます。もちろんアップグレードも可能。
$ yarn upgrade cowsay@1.0.0
yarn は楽でいいですね。個人的には npm と違ってデフォルトでローカルパッケージインストールなのが安心です。
【React Native/Expo】Google Oauth認証で認証後リダイレクトを行う
前回の記事では、Expoを使用して作成したReact NativeアプリにGoogleのOAuth認証を実装しました。
今回はその認証後にリダイレクト先URLを設定し、リダイレクト先にログインユーザの情報にアクセスするためのトークンを渡す手順について書いていきます。
WebクライアントIDの作成
認証後にリダイレクト可能なエンドポイントを設定するため、WebクライアントIDを作成します。
下記Google認証設定のページに遷移し、「認証情報の作成」ボタンをクリックします。
ボタンをクリックすると作成したい認証情報のメニューが表示されるので「OAuth クライアントID」をクリック。
作成するクライアントIDの種類を選択します。今回はWebクライアントIDが欲しいので「Webアプリケーション」を選択。
すると詳細設定用のフォームが出現するのでIDの名称を入力し、リダイレクトしたいURLのドメインを「承認済みのJavaScript生成元」に、「承認済みのリダイレクトURL」にURLをそれぞれ入力します。入力が完了したら「作成」をクリック。
するとIDが作成されます。同時にクライアントIDを掲載したダイアログが表示されるので、IDをコピーしましょう。以降の工程ではこのIDをクライアントIDとして使用します。
アプリケーション側の実装
アプリケーション側の実装についても触れていきます。 以降の実装では、下記記事のアプリケーション作成を前提としています。
App.js
前回の記事 で作成した App.js 中の signInWithGoogle を以下のように変更します。
authUrl のパラメータである client_id には 先程取得したWebクライアントIDを入力してください。また redirect_url にはリダイレクト先のURLを入力してください。
async signInWithGoogle() { try { const result = await Expo.AuthSession.startAsync({ authUrl: `https://accounts.google.com/o/oauth2/v2/auth?` + `&client_id={WebクライアントID}` + `&redirect_uri={リダイレクトURL}` + `&response_type=code` + `&access_type=offline` + `&scope=profile`, }); if (result.type === 'success') { console.log('Google Access Token: ' + result.accessToken); } } catch (e) { console.log(e); } }
Backend
今回は認証後のリダイレクト先として自前のバックエンドAPIサーバを指定すします。例として以下のようなSpring実装のAPIエンドポイントを用意し、Google OAuth認証後はこのエンドポイントに対してリクエストが飛びます。
下記実装ではAPIリクエストが届くとバックエンド側のコンソールにトークンIDが表示されるようにしています。実際はトークンIDを利用して、Google認可ユーザの情報を取り扱ったりすることが多いです。
@RestController public class OAuthController { @RequestMapping(value = "/oauth/google", method = RequestMethod.GET) public void signInWithGoogle(@RequestParam String code) { System.out.println(code); } }
Demo
それでは、実際にアプリを動かしてみます。
npm start でExpo Developer toolsを起動し、QRコードをクライアント端末でスキャンしインストールを開始します。詳細な手順は下記記事に載っているので、適宜参照していただければ幸いです。
アプリを端末にインストールして起動したら、中央の「Sign in with Google」 ボタンを押します。
すると 「Expoがサインインのために"expo.io"を使用しようとしています`」と書かれたダイアログが出現するので、「続ける」をタップします。
続けて起動したアプリが別のサービス上でログインすることへの許可を求めてくるので、「Yes」をタップ。
するとGoogleの認証画面に遷移します。すでに端末上でGoogleログイン済みのアカウントがある場合、アカウント一覧からログインしたいアカウントを選択します。
認証に成功するとリダイレクトが実行され、バックエンドログにトークンIDが表示されているのがわかります。
2019-01-02T20:13:33.22+0900 [APP/PROC/WEB/0] OUT aBcd...(トークンIDが続く)
これでリダイレクト成功です！
OAuth認証は自前のサービスに組み込んで認証に使う場合が多く、リダイレクトでGoogleなどのSNS上にあるユーザ情報にサービスがアクセスさせなければいけない場面も割と多いので、今後も頻繁にメモしていきたいですね。
参考文献
【ReactNative/Expo】Google OAuth認証をReact Native(Expo)アプリに実装する
前回はExpo CLIでReact Nativeプロジェクトを作成しました。今回は同じくExpoを使って、Google OAuth認証を実装するネイティブアプリをReact Nativeで実装してみます。
OAuthとは
OAuth、特に2.0については下記の記事参照。
今回作成するアプリは上記記事例のクライアントに相当し、Google API バックエンドがリソースサーバ・認可サーバを兼任します（内部で別れているのかもしれませんが）。リソースオーナーはクライアントIDなど、APIリクエストに必要な情報を発行します。
ExpoアプリでGoogle OAuth認証を実装する
それでは早速作っていきましょう。
なおクライアント端末はiOSの前提で進めています。
リソースオーナー（Googleアカウント）側の設定
アカウントの作成
実装に入る前に、Google OAuth に利用する開発者用アカウントを用意します。
Googleアカウントを持っていない方はアカウントを作成してください。
GCPプロジェクトの作成
アカウントを作成したら、GCP内にアプリ専用のプロジェクトを作成します。このプロジェクト単位に認証情報や使用ライブラリを管理できます。
まず、Google Developer Credentialsにアクセスします。
ロゴ右隣のプロジェクト名欄をクリック。
プロジェクト選択ダイアログが表示されるので、「新しいプロジェクト」をクリック。
プロジェクト作成フォームが表示されます。プロジェクト名を入力し、「作成」ボタンをクリック。
これでアプリプロジェクトがGoogle API Console上に作成されました。
iOSクライアントIDを作成
次に、OAuth APIに必要なクライアントIDを作成していきます。
Google Developer Credentialsの「認証情報」タブの画面中央の「認証情報の作成」をクリックします。
クリックするといくつかの選択肢が出るので、「OAuth クライアント キー」をクリック。
キーの作成画面に遷移します。Google APIを呼び出すアプリケーションの種類について聞かれるので、クライアント端末の機種がiOSの場合は「iOS」を、Androidの場合は「Android」を選択します。
ラジオボタンの一つを選択すると、詳細設定のための入力欄が表示されます。クライアントIDの名前と、バンドルIDを入力します。バンドルIDはアプリケーションを一意に識別する名前のため、一意になるような名前を設定します（com.hoge.fuga.piyoなど）。
今回はExpoアプリで実行するため、 host.exp.exponent と設定します。（バンドルIDがこれと異なると、Expoアプリ上でGoogle OAuthができません）
※参考
入力を確定すると、クライアントIDが発行されます。 このクライアントIDは後ほどExpoアプリ内で使用します。
クライアントアプリの実装
いよいよ実装に入ります。
プロジェクトの作成
その前にアプリケーションの開発環境を作成しなければいけません。なので下記記事に従い、Expo CLIでReact Nativeプロジェクトを作成していきます。
app.json の設定
次に、クライアント端末側の app.json にプロパティを追加します。
app.json のJSONに ios プロパティを追加し、その直下に bundleIdentifier config.googleSignin.reservedClientId を追加してください。bundleIdentifier は host.exp.exponent に、 reservedClientId はiOSクライアントIDを逆にしたものを設定してください。
{ ... "ios": { "bundleIdentifier": "host.exp.exponent", "config": { "googleSignIn": { "reservedClientId": "{iOSクライアントIDを逆にしたもの : com.hoge.fugaだったらfuga.hoge.com}" } } } } }
App.js
フロントビューと、ビューロジックの実装になります。
画面には認証用のボタンをひとつ配置しており、そのボタンを押すことでGoogleのOAuth認証が起動するようになっています。OAuthの起動は expo.Google.logInAsync によって行われます。
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import expo from 'expo'; export default class App extends React.Component { render() { return ( <View style={styles.container}> <Button onPress={this.signInWithGoogle} title="Sign in with Google" /> </View> ); } // Google OAuth認証メソッド async signInWithGoogle() { try { const result = await expo.Google.logInAsync({ behavior: 'web', iosClientId: '{iOSクライアントID}', scopes: ['profile', 'email'], }); // 認証に成功したら、アクセストークンが標準出力される if (result.type === 'success') { console.log('Google Access Token: ' + result.accessToken); } } catch (e) { console.log(e); } } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
今回はブラウザアプリを開く形でGoogle OAuth認証画面を表示しています。 認証に成功すると、コンソール上に認可アクセストークンが表示されます。このアクセストークンを第三者が使用することで、限定された範囲で認証ユーザの情報にアクセスできるようになります。
これでアプリ起動の準備が整いました！
Demo
実際にアプリを起動して、挙動を確かめてみます。
npm run start を実行し、起動時に開いたブラウザ画面、またはコンソール上のQRコードを端末でスキャンし、アプリをインストールします（Expo Clientアプリが必要です）。
詳しいローカル起動方法は下記記事を参照。
起動が成功すると、下記のような画面が表示されます。「Sign in with Google」ボタンを押すと、OAuth認証の画面へ遷移します。
iOSの場合、Expoアプリがgoogle.comをブラウザ開くことを許可するかどうか確認するダイアログが表示されるので「続ける」をクリック。
Googleログインが未実行の場合、Googleアカウントのメールアドレスとパスワードを聞かれます。所有するGoogleアカウントのメールアドレス・パスワードを入力し、ログインを実行してください。
ログインが成功すると、もとのアプリ画面に戻ります。コンソール上にアクセストークンが表示されれば、認証成功です。
余談
Expoの expo.Google.loginAsync ではスタンドアロンアプリとしての認証オプションも用意してあるのですが、端末のOSごとに細かい設定が必要みたいなので今回は behavior = webを使用しての実装を採用しました。
参考文献
OAuth 2.0 for Mobile & Desktop Apps | Google Identity Platform | Google Developers
【React Native】Expo CLIを利用してReact Nativeプロジェクトを作成する
あけましておめでとうございます。新年一発目の記事です。
今年もやっていきましょう。
今回はバックエンドAPIのドライバとしてクライアントアプリ（React Native）を作るためにExpoを使ったので、備忘録も兼ねてExpo CLIの紹介をしようと思います。
Expoとは
ExpoはReact Nativeによるクロスプラットフォームアプリ開発の支援サービスです。React Nativeのプロジェクト作成・ビルド・デプロイを容易にするCLIや、React Native上での認証等のロジック・カメラビューなどのUIコンポーネントの実装を簡単にしてくれるSDKなどを提供してくれます。
今回はExpo CLIを使用して、簡単に便利なReact Native環境を構築します。
Expo CLIのインストール
はじめにglobal環境上にnpm(またはyarn)を使用して expo-cli をインストールします。
$ npm instal -g expo-cli
$ yarn add global expo-cli
余談ですが、 npm でインストールするときに以下ようなエラーが出てインストールできない場合があります。この場合、 sudo をつけることでインストール可能になります（rootlessのせい？）。
npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator (though this is not recommended).
Expo CLIによるReact Nativeプロジェクトの作成
インストールが完了したら、以下のコマンドでReact Nativeプロジェクトが作成できます。
my-app の部分は好みのプロジェクト名に変更してください。
$ expo init my-app
コマンドを実行すると、以下のような選択肢が出現します。
プロジェクト内のアプリテンプレートをどうするか聞かれますが、今回はサンプルのない状態から始めるので blank を選択しEnter。
? Choose a template: ❯ blank minimum dependencies to run and an empty root component tabs several example screens and tabs using react-navigation
これだけです！ これでReact Native(+Expo)プロジェクトの作成が開始されます。
Expoプロジェクトアプリをローカルで起動する
作成したプロジェクトルート上で npm start または yarn start を実行すると、アプリがローカルサーバ上で起動します。
$ yarn start yarn run v1.7.0 $ expo start [23:00:35] Starting project at /Users/aa367417/IBMProj/Kyoritu/Project/react_native/owner-client [23:00:37] Expo DevTools is running at http://localhost:19002 [23:00:37] Opening DevTools in the browser... (press shift-d to disable) [23:00:47] Starting Metro Bundler on port 19001. [23:00:49] Tunnel ready. exp://192.168.11.10:19000 ````` ここにQRコードが表示される ````` To run the app with live reloading, choose one of: • Sign in as @rk9902 in Expo Client on Android or iOS. Your projects will automatically appear in the "Projects" tab. • Scan the QR code above with the Expo app (Android) or the Camera app (iOS). • Press a for Android emulator, or i for iOS simulator. • Press e to send a link to your phone with email/SMS. Press ? to show a list of all available commands. Logs for your project will appear below. Press Ctrl+C to exit.
アプリが起動すると同時にブラウザが開き、Expo Developer Toolが開きます。このコンソール上ではアプリのログが表示されます。
Expo Developer Tool上または npm start yarn start を実行したコンソール上のQRコードをモバイル端末でスキャンすると、端末上でアプリが起動します。
・・・が、その前にアプリの起動に必要なExpo Clientアプリを端末にインストールする必要があります。iOSであればApple Store、AndroidであればGoogle Play Storeからインストールしてください。
Expo Clientを端末にインストールしてからQRコードをスキャンすると、以下のように初期状態のExporプロジェクトのアプリが起動できます。
ものの5分でプロジェクトが作成+アプリのローカル起動ができました。 QRですぐ端末上でデバッグできるのがいいですね！
以前は create-react-native-app でExpoプロジェクト作成できたのに、なぜか作成できなくなってたので、新しく expo-cli をインストールしました。
まだExpoに関しては未知の部分も多いので、ちょくちょく遊んでみようかなと思いました。
参考文献
【2018年終】約半年間、技術ブログを毎日書き続けた話
TL;DR
2019年はがんばります
概要
2018年ももう終わりなので、今日は技術的な話ではなく「ブログ書いててどうだったか」について書こうと思います。
なぜ、毎日ブログを始めたのか
技術ブログを毎日書くきっかけとなったのは、「SOFT SKILLS ソフトウェア開発者の人生マニュアル」という本でした。
- 作者: ジョン・ソンメズ,まつもとゆきひろ(解説),長尾高弘
- 出版社/メーカー: 日経BP社
- 発売日: 2016/05/20
- メディア: 単行本
- この商品を含むブログ (5件) を見る
この本はソフトウェアエンジニアにとってブログを書くことの重要性を一章丸々使って説いており、
ブログは、自分をマーケティングするための方法としては安くて簡単であり、しかも、自分の名前を外に出すために極めて役に立つ。
ブログを持っていると、より良い勤め先に落ち着くために役立つだけではなく、ソフトウェア開発者、コミュニケーターとして力量を上げるために役立ち、想像したこともないようなあらゆるチャンスが引き寄せられてくる。
など、（技術）ブログがいかにエンジニアのプレゼンスに貢献するかについて述べていました。
以前よりQiitaやはてブでいくつか記事を書いたことはあったのですが、更新頻度は半年に1~2回程度と少なめでした。SOFT SKILLを読み、ソフトウェアエンジニアにとってブログを（継続して）書くことは有益であるとを改めて感じた僕は、ブログ毎日書いてみるか、と半ばノリで始めることにしました。
結果
2月から毎日ブログを書き始め、（中抜けも3日位ありましたが）７月半ばまで約半年間毎日書き続けることができました。
・・・ですが、８月になって徐々に仕事が厳しい感じになり、そこからまたブログを書かなくなってしまいました（たまにちょこちょこ書いてはいたのですが）。
最近では徐々に仕事も落ち着き、また毎日ブログを再開しつつあります。
結果的に、平均して2日に一回くらいの更新頻度になりました。
技術ブログを毎日書き続けて気づいたメリット・デメリット
技術ブログをたまに書くのと毎日書くのでは、やっぱり違いました。
メリット
記事を書くほど知識が必要になり、結果学びになる
ブログの記事を書く以上、記事のネタに関する知識はある程度持っている必要があります。そのため、まだ自分の知らない技術に関して記事を書く場合そこそこの知識が必要になります。これを利用して、自分が全く知らないが学びたい技術をあえてネタにし、学習の機会として使っています。そのため僕のブログの記事で扱うネタのほとんどは、新規に学びたいがために最初は知らなかったものばかりです。
例えば、下記の記事は何も知らない状態から公式マニュアルを見つつ書いたものです。
上記記事ではWebpackのチュートリアルを通じて、「Webpackって結局何なん」という疑問を解決することを目的としました。記事を書くことで、「WebpackはWebアプリのコードを依存ライブラリ込みでひとまとめにすること」「ひとまとめにしたコードはミニマイズされること」「トランスパイルも自動適用されること」など、いろいろ学びがありました。
またこのWebpackをいじることでnpmのnpxやbabelなど他の技術にも関わることになるので、「他に何を学べばいいのか」を知るきっかけにもできます。このように自分の知らない技術・新しい技術を学ぶことで、さらに次の学ぶべき事柄を見つけることができ、知識の幅をどんどん広げることができます。
もちろんソフトウェアエンジニアには知識だけでなく、経験などの他の要素も必要ですが、「XXの問題にはこのような技術的解決案がある」などといった「技術に対するインデックスを貼れる」という点で知識を増やすことには価値があると僕は考えています。
少しずつだが着実に来訪者が増えていくので、楽しい
当然といえば当然ですが、毎日ブログを書いていると必然的に記事数が増えていき、読み手の欲しい情報も増えていきます。そうすると少しずつですが、確実に訪問者が増えていくのがわかります。アクセス解析で一日の訪問者数が増えていくのは見ていて普通に楽しいです。
ブログを半年に1~2回程度しか更新していなかった頃は、一日あたりのアクセス数は良くて20程度でしたが、現在では一日500位にはなりました。
コミュニケーションの起点になる
毎日ブログを書き始めてから、もっと色んな人に見てもらいたいという思いからTwitterやFacebookにも記事を共有するようになりました。すると色んな人から「ブログ書いてるやん」と話かけてもらえるようになり、そこから仕事の話や技術的な話に広げられたりすることが多くなりました。SOFT SKILLにあった「コミュニケーターとして力量を上げる」とは少し違いますが、他の人との接点を作れる良いメリットだと思います。
デメリット
趣味の個人開発の時間が減る
ブログを書いていてメリットも有るのですが、デメリットもあります。 特に、ブログを書いている間「コード書けてないな」と思うことが多くなりました。趣味の時間でブログを書く分、コードを書いたり、APIやDBの設計を考えたり、自作アプリについて構想を練る時間が減ってしまった感じがします。
じゃあ毎日ブログを書くことでコードを書いたり、APIやDBの設計を考えたり、自作アプリについて構想を練るのは不可能になるのか？というとそうではないです。ただブログを書くことで他のことに時間を割きにくくなるのは本当なので、注意深く時間繰りしないとブログ書いて一日が終わるみたいなことが頻繁に起きます。
来年の抱負
ブログ
2019年も毎日継続して書く
ブログを続けることによるメリットは確かに感じており、また普通に書いていて楽しいので今後も続けていこうと思います。
来年は
- 無理をしない程度に書く
- 自分、読者にとって価値のある記事を書く
といったところに気をつけて書いていこうと思います。
無理をしない程度に書く
なぜブログを書く上で無理をしないよう気をつけるのかというと、今回は継続してブログを書くことを重視しているからです。ブログの最終的な目標は記事を書くことによるスキル・プレゼンス等の向上なのですが、そのためにはまずブログが続くことが大事だと考えたためです。あとしんどいと楽しくないのでだめです。
自分、読者にとって価値のある記事を書く
自分、あるいは読者にとって価値のある記事であってこそ、その記事の存在価値が生まれると僕は考えています。価値とは、備忘録としての役割であったり、新しい学びの提供であったり様々ですが、とにかく誰かの「役に立つ」ことを意識して作成しています。
例えば、以下の記事は自分に当てたメモ的記事です。
この記事は、
- 一度実装済みだが、万が一忘れたときのためにメモとして残しておこう
- 他の人も同じ問題で困ってるかもしれないから共有しよう
という意識で書き残したものです。一番目は自分のため、二番目は読者のためという視点です。こんなかんじで、「誰かの役に立ったらハッピー」くらいの意識でブログを書いていくと、いつか誰かの役に立つ、価値のある記事になるのではないでしょうか。
ブログ以外
ブログだけにしない
先程のデメリットの話にも出てきたのですが、ブログを書き続けているとどうしても他の作業に時間が回らなくなってしまいます。今年は自分の時間を確保することを意識しながらもブログ活動は継続しつつ、
- 個人開発（今年は完成まで至らず。。。）
- 会社のコミュニティ活動（引き続き勉強会などやっていく）
- 外部コミュニティイベントへの参加（外部は今年で2回）
など引き続き行っていきたいと思います。
来年からも、引き続きよろしくお願いいたします。
【Spring】@TransactionalでTransactionManagerを明示的に指定する
メモ。
TL;DR
Spring で使用する@Transactionには、下記のように使用する Manager を明示できます。
@Transactional("jpaTransactionManager")
複数のTransactionManagerの定義と@Transaction
Springにおける@Transactionは、デフォルトで用意されている一意のTransactionManagerを参照しています。
しかし、下記のように新たにTransactionManagerを@Configurationクラス内で定義したりすると、
protected PlatformTransactionManager getTransactionManager() { return transactionConfig.getJpaTransactionManager(); }
@TransactionはどのTransactionManagerを参照していいのかわからず、下記のようなエラーを吐いてしまいます。
org.springframework.beans.factory.NoUniqueBeanDefinitionException: No qualifying bean of type 'org.springframework.transaction.PlatformTransactionManager' available: expected single matching bean but found 2: transactionManager,getJpaTransactionManager
@Transactionが使用するManagerを明示的に指定するには、@Transactionの引数にTransactionManagerの名称を渡します。@Transactionは指定したTransactionManagerに従い、Transaction管理を実行します。
@Transactional("jpaTransactionManager")
