diagram.svg

<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="785" height="766" xmlns:xlink="http://www.w3.org/1999/xlink"><source><![CDATA[
End ->  WebApp: start
note right of WebApp: state内にJWT(1)を仕込む

WebApp --> End: redirectURL(stateを含む)
End -> Google : redirectURL(stateを含む)
Google --> End:callback(state含む)
End -> WebApp:callback(state含む)
note right of WebApp: stateの検証(JWT(1)の署名確認):ok
WebApp -> Google:AccessTokenの取得
Google --> WebApp:AccessTokenを渡す
note right of WebApp: AccesTokenからユーザー情報取得しDB保存

note right of WebApp: (公開可能な)ユーザー情報を含むJWT(2)を作成
WebApp -> End: JWT(2)
note right of End: sessonStorageにJWT(2)を保存

End -> WebApp: redirect "/" 
note right of End: 以降のアクセスにJWT(2)を利用
]]></source><desc></desc><defs><marker viewBox="0 0 5 5" markerWidth="5" markerHeight="5" orient="auto" refX="5" refY="2.5" id="markerArrowBlock"><path d="M 0 0 L 5 2.5 L 0 5 z"></path></marker><marker viewBox="0 0 9.6 16" markerWidth="4" markerHeight="16" orient="auto" refX="9.6" refY="8" id="markerArrowOpen"><path d="M 9.6,8 1.92,16 0,13.7 5.76,8 0,2.286 1.92,0 9.6,8 z"></path></marker></defs><g class="title"></g><g class="actor"><rect x="10" y="20" width="48.796875" height="38.21875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="20" y="45.109375" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="20">End</tspan></text></g><g class="actor"><rect x="10" y="708.4375" width="48.796875" height="38.21875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="20" y="733.546875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="20">End</tspan></text></g><line x1="34.3984375" x2="34.3984375" y1="58.21875" y2="708.4375" stroke="#000000" fill="none" style="stroke-width: 2;"></line><g class="actor"><rect x="287.890625" y="20" width="77.609375" height="38.21875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="297.890625" y="45" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="297.890625">WebApp</tspan></text></g><g class="actor"><rect x="287.890625" y="708.4375" width="77.609375" height="38.21875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="297.890625" y="733.4375" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="297.890625">WebApp</tspan></text></g><line x1="326.6953125" x2="326.6953125" y1="58.21875" y2="708.4375" stroke="#000000" fill="none" style="stroke-width: 2;"></line><g class="actor"><rect x="677.828125" y="20" width="77.609375" height="38.21875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="687.828125" y="45" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="687.828125">Google</tspan></text></g><g class="actor"><rect x="677.828125" y="708.4375" width="77.609375" height="38.21875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="687.828125" y="733.4375" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="687.828125">Google</tspan></text></g><line x1="716.6328125" x2="716.6328125" y1="58.21875" y2="708.4375" stroke="#000000" fill="none" style="stroke-width: 2;"></line><g class="signal"><text x="156.546875" y="89.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="156.546875">start</tspan></text><line x1="34.3984375" x2="326.6953125" y1="96.21875" y2="96.21875" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="note"><rect x="346.6953125" y="116.21875" width="206.609375" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="351.6953125" y="136.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="351.6953125">state内にJWT(1)を仕込む</tspan></text></g><g class="signal"><text x="71.5703125" y="175.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="71.5703125">redirectURL(stateを含む)</tspan></text><line x1="326.6953125" x2="34.3984375" y1="182.21875" y2="182.21875" stroke="#000000" fill="none" style="stroke-width: 2; stroke-dasharray: 6, 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="signal"><text x="266.5390625" y="213.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="266.5390625">redirectURL(stateを含む)</tspan></text><line x1="34.3984375" x2="716.6328125" y1="220.21875" y2="220.21875" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="signal"><text x="287.9453125" y="251.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="287.9453125">callback(state含む)</tspan></text><line x1="716.6328125" x2="34.3984375" y1="258.21875" y2="258.21875" stroke="#000000" fill="none" style="stroke-width: 2; stroke-dasharray: 6, 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="signal"><text x="92.9765625" y="289.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="92.9765625">callback(state含む)</tspan></text><line x1="34.3984375" x2="326.6953125" y1="296.21875" y2="296.21875" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="note"><rect x="346.6953125" y="316.21875" width="290.375" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="351.6953125" y="336.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="351.6953125">stateの検証(JWT(1)の署名確認):ok</tspan></text></g><g class="signal"><text x="445.171875" y="375.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="445.171875">AccessTokenの取得</tspan></text><line x1="326.6953125" x2="716.6328125" y1="382.21875" y2="382.21875" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="signal"><text x="446.421875" y="413.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="446.421875">AccessTokenを渡す</tspan></text><line x1="716.6328125" x2="326.6953125" y1="420.21875" y2="420.21875" stroke="#000000" fill="none" style="stroke-width: 2; stroke-dasharray: 6, 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="note"><rect x="346.6953125" y="440.21875" width="322.59375" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="351.6953125" y="460.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="351.6953125">AccesTokenからユーザー情報取得しDB保存</tspan></text></g><g class="note"><rect x="346.6953125" y="488.21875" width="349.9375" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="351.6953125" y="508.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="351.6953125">(公開可能な)ユーザー情報を含むJWT(2)を作成</tspan></text></g><g class="signal"><text x="151.7421875" y="547.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="151.7421875">JWT(2)</tspan></text><line x1="326.6953125" x2="34.3984375" y1="554.21875" y2="554.21875" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="note"><rect x="54.3984375" y="574.21875" width="252.296875" height="28.21875" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="59.3984375" y="594.21875" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="59.3984375">sessonStorageにJWT(2)を保存</tspan></text></g><g class="signal"><text x="122.9375" y="633.4375" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="122.9375">redirect "/"</tspan></text><line x1="34.3984375" x2="326.6953125" y1="640.4375" y2="640.4375" stroke="#000000" fill="none" style="stroke-width: 2; marker-end: url(&quot;#markerArrowBlock&quot;);"></line></g><g class="note"><rect x="54.3984375" y="660.4375" width="231.234375" height="28" stroke="#000000" fill="#ffffff" style="stroke-width: 2;"></rect><text x="59.3984375" y="680.4375" style="font-size: 16px; font-family: &quot;Andale Mono&quot;, monospace;"><tspan x="59.3984375">以降のアクセスにJWT(2)を利用</tspan></text></g></svg>