PHPカンファレンス福岡 2018 で発表した資料です。

1. Phoenix + React
2018/6/16
PHP 2018

2. •
• Fusic
• PHPer
• Twitter : @kobatako_
• Qiita : @kobatako

4. •
•
•

5. •

6. •

7. •

8. •

9. •

11. DB

12. React Redux Elixir Phoenix
DB
LDAPGraphQL

13. React Redux Elixir Phoenix
DB
LDAPGraphQL

14. • React
• JSX JS
• Component
• Redux
•
•

15. Redux
1.view
2. Reducers
3.Reducers
4.Store View

16. • GraphQL Apollo
• React React Native Angular Vue
• Android Swift
• Component Query React

17. •Query Component
•Component load
• {} return component
<Query query={ query }>
{ ({loading, error, data}) => {
return (
<Card fluid>
</Card>
)
}
}
</Query>

18. React Redux Elixir Phoenix
DB
LDAPGraphQL

19. • Elixir
•
• Erlang VM
• Phoenix
• Web Framework
• Rails
• v1.4 webpack

20. • GraphQL API
• absinthe
• Elixir GraphQL
•
scope "/api" do
pipe_through :api
forward "/graphiql", Absinthe.Plug.GraphiQL,
schema: ResourceNote.Schema
forward "/", Absinthe.Plug,
schema: ResourceNote.Schema
end
http://localhost/api

21. • DB
• Erlang eldap

22. React Redux Elixir Phoenix
DB
LDAPGraphQL

23. • GraphQL
• Web API
• Query
• Mutaion
•
•
•

24. React Redux Elixir Phoenix
DB
LDAPGraphQL

25. DB
• LDAP Lightweight Directory Access Protocol
•
• Lightweight
• Active Directory

27. LDAP

29. • DB
• Redux Store
• GraphQL
• View

30. • DB
• Redux Store
• GraphQL
• View

31. DB
dc=corporation,dc=home,dc=local
ou=Peopleou=Serverou=Productou=Accountou=Group
cn=Group01 cn=User01cn=Product01
cn=Project01

32. DB
• Root DN : dc=corporation,dc=home,dc=local
• Root OU
• DN: ou=People,dc=corporation,dc=home,dc=local
• DN: ou=Product,dc=corporation,dc=home,dc=local
• Group Project User
• cn=User01,cn=Group01,ou=Group,dc=corporation,
dc=home,dc=local
•
cn=User01,ou=People,dc=corporation,dc=home,dc=local

33. • DB
• Redux Store
• GraphQL
• View

34. Redux Store
•
• Store
• Immutable

35. LDAP Store

36. Redux Store
• DB Store

37. Redux Store
• DB Store

38. Redux Store
• Store

39. • DB
• Redux Store
• GraphQL
• View

40. • Container Pattern
• Container
• Container
• Presentation
• Container
View

41. View
Header Container
Content Container
DirectoryTree Container

42. View

43. View
• View
<Query query={ query }>
{ ({loading, error, data}) => {
return (
<Card fluid>
</Card>
)
}
}
</Query>
• View
• View

44. View
• Redux-saga
•
•
•
•
• action
dispatch

45. import { take, put, call, fork } from 'redux-saga/effects'
export function* callSearchUsers() {
while (true) {
const action = yield take(SEARCH_USERS);
const res = yield call(searchUsers, action);
yield put({
type: SUCCESS_SEARCH_USERS,
entity: res
});
}
}
export default function* rootSaga() {
yield fork(callSearchUsers);
}
callSearchUsers
View

46. import { take, put, call, fork } from 'redux-saga/effects'
export function* callSearchUsers() {
while (true) {
const action = yield take(SEARCH_USERS);
const res = yield call(searchUsers, action);
yield put({
type: SUCCESS_SEARCH_USERS,
entity: res
});
}
}
export default function* rootSaga() {
yield fork(callSearchUsers);
}
SEARCH_USERS dispatch
View

47. searchUsers
import { take, put, call, fork } from 'redux-saga/effects'
export function* callSearchUsers() {
while (true) {
const action = yield take(SEARCH_USERS);
const res = yield call(searchUsers, action);
yield put({
type: SUCCESS_SEARCH_USERS,
entity: res
});
}
}
export default function* rootSaga() {
yield fork(callSearchUsers);
}
searchUsers
promise
action
View

48. import { take, put, call, fork } from 'redux-saga/effects'
export function* callSearchUsers() {
while (true) {
const action = yield take(SEARCH_USERS);
const res = yield call(searchUsers, action);
yield put({
type: SUCCESS_SEARCH_USERS,
entity: res
});
}
}
export default function* rootSaga() {
yield fork(callSearchUsers);
}
dispatch
View

49. • DB
• Redux Store
• GraphQL
• View

50. GraphQL
•
• Input
• Output
• Schema

51. GraphQL
•
• Input
• Output
• Schema

52. GraphQL
query searchUsers(
$user: TargetUser!, $isProject: Boolean, $isGroup: Boolean
) {
searchUsers(
targetUser: $user, isProject: $isProject, isGroup: $isGroup
) {
}
• Schema
•
•
Schema

53. GraphQL
const typeDefs = `
type TargetUser {
uid: String,
sn: String,
password: String,
mail: String,
extensionNumber: String,
githubAccount: String,
slackMention: String
}
`;
•
input_object :target_user do
field :uid, :string
field :sn, :string
field :mail, :string
field :password, :string
field :extension_number, :string
field :github_account, :string
field :slack_mention, :string
end

54. GraphQL
enum Status {
SALES
DEVELOPMENT
OPERATION
}
• Enum
enum :status do
value :sales
value :development
value :operation
end

55. GraphQL
•
• Input
• Output
• Schema

56. GraphQL
• Phoenix
• Apollo
{
id
name
dn
attributes {
name
values
}
dnArray {
name
value
}
}

57. GraphQL
object :dn do
field :name, :string
field :value, :string
end
object :attribute do
field :name, :string
field :values, list_of(:string)
end
object :entity do
field :id, :id
field :name, :string
field :dn, :string
field :dn_array, list_of(:dn)
field :object_class, list_of(:string)
field :attributes, list_of(:attribute)
end
{
id
name
dn
attributes {
name
values
}
dnArray {
name
value
}
}
• list_of

58. GraphQL
•
• Input
• Output
• Schema

59. GraphQL
• Query SELECT
•
• Mutation INSERT UPDATE DELETE
•

60. GraphQL
• Schema
RESTFul API
field :search_user_attribute, list_of(:attribute)
field :search_user_dn, :user
field :search_project_users, list_of(:users)
Field :search_project, list_of(:project)

61. GraphQL
• Schema
•
field :search_users, list_of(:user)
field :search_project, list_of(:project)
field :search_product, list_of(:product)
field :create_user, :user

62. GraphQL
•
query($username: Stirng!) {
searchProject {
name
}
users(username: $username) {
id
name
}
}

65. SPA
🤔

66. Token

67. JWT
• Json
• RFC 7519
•

68. JWT
•
• Token
• Token
• Token

69. JWT
•
• Token
• Token
• Token

70. JWT
mutation($username: String!, $password: String!) {
createToken(username: $username, password: $password) {
id,
name,
token
}
}`;
•
• Token Mutation

71. JWT
•
def login_by_name_pass(name, given_pass, opts) do
user = Repo.get_by(User, username: name)
cond do
user && checkpw(given_pass, user.password) ->

72. JWT
• Token
Guardian.encode_and_sign(user, %{}, ttl: {1, :hour})
1

73. JWT
• localStorage
successLogin: (user) => {
localStorage.setItem("authorization", user.token)
dispatch(successLogin(user))
},

74. JWT
•
• Token
• Token
• Token

75. JWT
• Header Token
• authLink
•const authLink = setContext((_, { headers }) => {
const token = localStorage.getItem('authorization');
return {
headers: {
headers,
authorization: token ? `Bearer ${token}` : ""
}
}
});

76. JWT
• Header Token
def build_context(conn) do
with ["Bearer " <> token]
<- get_req_header(conn, "authorization"),

77. JWT
• Token decode Json
{:ok, c} = Guardian.decode_and_verify(authorization)
# c = %{
# "aud" => "guardian",
# "exp" => 1529031364, # Unix
# "iat" => 1529027764,
# "iss" => "guardian",
# "jti" => "9627ea1e-569b-4e00-840b-f9315b197296",
# "nbf" => 1529027763, # Unix
# "sub" => “3", # ID
# "typ" => "access"
# }

78. %{"exp" => exp, "nbf" => nbf, "sub" => sub} = c
now = Timex.Timezone.convert(Timex.now(), "Asia/Tokyo")
after_date = Timex.Timezone.convert(Timex.from_unix(exp), "Asia/Tokyo")
before_date Timex.Timezone.convert(Timex.from_unix(nbf), "Asia/Tokyo")
if Timex.between?(now, before_date, after_date) do
JWT
• exp nbf

79. if Timex.between?(now, before_date, after_date) do
user = Repo.get_by(User, id: sub)
{:ok, user}
else
{:error, "invalid authorization token"}
end
JWT
• {:ok,user}
• {:error, “invalid authorization token”}

80. def call(resolution, _config) do
case resolution.context do
%{current_user: _} ->
resolution
_ ->
resolution
|> Absinthe.Resolution.put_result({:error, "invalidAuthorizeToken"})
end
end
JWT
• {:ok,user} current_user
resolution
• {:error, “invalid authorization token”}
{:error, “unauthenticated”}

81. JWT
•
• dispatch
import { onError } from 'apollo-link-error';
const logoutLink = onError(({ networkError, response, graphQLErrors, operation }) => {
graphQLErrors.forEach((error, index) => {
switch(error.message) {
case "invalidAuthorizeToken":
localStorage.removeItem('authorization');
store.dispatch(invalidAuthorizeToken());
break;
}
});
});

83. •
• SPA
• Elixir

84. •
• React View
• GraphQL RPC
• session