wada811/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Sign In With Apple JS

Sign In With Apple JS をローカルでとりあえず動かしてみるリポジトリです。
HOW TO USE


ローカルで WEBrick サーバを動かします。

ruby server.rb

ローカルサーバを serveo で公開します。

ssh -R siwa:80:localhost:8080 serveo.net

https://siwa.serveo.net/ にアクセスします。
Android 向けに即リダイレクトするやつは https://siwa.serveo.net/signin.html へアクセスしてください。

注意点


複数人が同時に serveo に公開できない（たぶん）。
Apple Developer Portal で Services ID の Test を削除したら認証できない。


## apple-developer-domain-association.txt
なんかめっちゃ長い文字列のファイル
.well-known/apple-developer-domain-association.txt に置く

## callback.html
<html>
    <body>
        <script type="text/javascript">
        const decodeJwt = (token) => {
          const base64Url = token.split('.')[1];
          const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
          return JSON.parse(decodeURIComponent(escape(window.atob(base64))));
        };
        </script>
        <h1># request.body</h1>
        <pre>#{request.body}</pre>
        #{
            entries = request.body.split("&")
            entries.each{ |entry|
              key = entry.split("=")[0]
              value = entry.split("=")[1]
              body += "<h1># #{key}</h1>"
              body += "<pre>#{value}</pre>"
              if key == "id_token"
                body += "<h1># decoded id_token</h1>"
                body += "<pre id='decode'></pre>"
                body += <<-"EOS"
                    <script type="text/javascript">
                    console.log(decodeJwt("#{value}"))
                    document.getElementById("decode").innerText = JSON.stringify(decodeJwt("#{value}"), null, 4);
                    </script>
                    EOS
              end
            }
            body
        }
    </body>
</html>

## index.html
<html>
    <body>
        <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : 'siwa.serveo.net',
                scope : 'name email',
                redirectURI: 'https://siwa.serveo.net/callback',
                state : 'state'
            });
        </script>
    </body>
</html>

## server.rb
require 'webrick'

server = WEBrick::HTTPServer.new({
  DocumentRoot:   './',
  BindAddress:    'localhost',
  Port:           8080,
})

server.mount_proc('/') do |request, response|
  puts "========== #{Time.new} =========="
  # リクエスト内容を出力
  puts request.request_line
  puts ''
  puts request.raw_header
  puts "\n#{request.body}" if request.body
  # レスポンス内容を出力
  response.status = 200
  response['Content-Type'] = 'text/html'

  case request.path
    when '/'
      File.open("index.html") do |file|
        response.body = file.read
      end
    when '/callback'
      File.open("callback.html") do |file|
        body = ""
        response.body = eval("<<-\"EOF\"\n" + file.read + "\nEOF", binding)
      end
    else
      begin
        File.open("." + request.path) do |file|
          response.body = file.read
        end
      rescue
        response.status = 404
      end
  end
  puts "==============================================="
end


trap("INT") {
    server.shutdown
}

server.start

## signin.html
<html>
    <body>
        <div id="appleid-signin" data-color="black" data-border="true" data-type="sign in" style="display: none;"></div>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : 'siwa.serveo.net',
                scope : 'name email',
                redirectURI: 'https://siwa.serveo.net/callback',
                state : 'state'
            });
            AppleID.auth.signIn();
        </script>
    </body>
</html>

## 参考
webrickでサーバー作った - Qiita https://qiita.com/littlekbt/items/018a1630101e0521e518
Create basic Web Server in Ruby (using WEBrick) https://gist.github.com/Integralist/2862917
Ruby 標準ライブラリの WEBrick で Web サーバを作る - Qiita https://qiita.com/niwasawa/items/9713adaa3e82b695bce7#curl-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AE-web-%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AB-http-post-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B
ngrok大好きな私がServeoで感動した話 - Qiita https://qiita.com/sskmy1024y/items/8395c85d09931d7dea27
	なんかめっちゃ長い文字列のファイル
	.well-known/apple-developer-domain-association.txt に置く
	<html>
	<body>
	<script type="text/javascript">
	const decodeJwt = (token) => {
	const base64Url = token.split('.')[1];
	const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
	return JSON.parse(decodeURIComponent(escape(window.atob(base64))));
	};
	</script>
	<h1># request.body</h1>
	<pre>#{request.body}</pre>
	#{
	entries = request.body.split("&")
	entries.each{ \|entry\|
	key = entry.split("=")[0]
	value = entry.split("=")[1]
	body += "<h1># #{key}</h1>"
	body += "<pre>#{value}</pre>"
	if key == "id_token"
	body += "<h1># decoded id_token</h1>"
	body += "<pre id='decode'></pre>"
	body += <<-"EOS"
	<script type="text/javascript">
	console.log(decodeJwt("#{value}"))
	document.getElementById("decode").innerText = JSON.stringify(decodeJwt("#{value}"), null, 4);
	</script>
	EOS
	end
	}
	body
	}
	</body>
	</html>
	<html>
	<body>
	<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"></div>
	<script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
	<script type="text/javascript">
	AppleID.auth.init({
	clientId : 'siwa.serveo.net',
	scope : 'name email',
	redirectURI: 'https://siwa.serveo.net/callback',
	state : 'state'
	});
	</script>
	</body>
	</html>
	require 'webrick'

	server = WEBrick::HTTPServer.new({
	DocumentRoot: './',
	BindAddress: 'localhost',
	Port: 8080,
	})

	server.mount_proc('/') do \|request, response\|
	puts "========== #{Time.new} =========="
	# リクエスト内容を出力
	puts request.request_line
	puts ''
	puts request.raw_header
	puts "\n#{request.body}" if request.body
	# レスポンス内容を出力
	response.status = 200
	response['Content-Type'] = 'text/html'

	case request.path
	when '/'
	File.open("index.html") do \|file\|
	response.body = file.read
	end
	when '/callback'
	File.open("callback.html") do \|file\|
	body = ""
	response.body = eval("<<-\"EOF\"\n" + file.read + "\nEOF", binding)
	end
	else
	begin
	File.open("." + request.path) do \|file\|
	response.body = file.read
	end
	rescue
	response.status = 404
	end
	end
	puts "==============================================="
	end


	trap("INT") {
	server.shutdown
	}

	server.start
	webrickでサーバー作った - Qiita https://qiita.com/littlekbt/items/018a1630101e0521e518
	Create basic Web Server in Ruby (using WEBrick) https://gist.github.com/Integralist/2862917
	Ruby 標準ライブラリの WEBrick で Web サーバを作る - Qiita https://qiita.com/niwasawa/items/9713adaa3e82b695bce7#curl-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AE-web-%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AB-http-post-%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B
	ngrok大好きな私がServeoで感動した話 - Qiita https://qiita.com/sskmy1024y/items/8395c85d09931d7dea27