nakajo2011/index.html

## index.html
<!doctype html>
<html>
  <head>
    <title>uPort Sample App</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
    <script src="https://unpkg.com/uport-connect/dist/uport-connect.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      main { padding: 10px 30px; }
      header { background: #EEE; }
      /* uPortが生成するデフォルト画面のwidthが400pxで固定されてるのでそれを解除するためのcss */
      div#uport-qr div {
        width: initial !important;
        min-width: 400px !important;
      }
    </style>
  </head>
  <body>
    <script language="javascript" src="sample.js"></script>
    <div class="container">
      <h1 id="appName">
        uPort Sample App hoge
      </h1>
      <button class="btn btn-sm btn-primary" id="connectUportBtn">Connect uPort</button>
    </div>
    <div class="container">
      <p id="userInformation"></p>
    </div>
  </body>
</html>

## sample.js
// import {Connect, SimpleSigner} from 'uport-connect'

const Connect = window.uportconnect.Connect
const SimpleSigner = window.uportconnect.SimpleSigner

window.onload = function () {
  const btn = document.getElementById("connectUportBtn")
  console.log("btn=", btn)
  btn.addEventListener("click", (e) => uportConnect())
}

const uportConnect = function () {
  const logelem = document.getElementById("userInformation")
  const uport = new Connect('y_nakajo\'s sample app', {
    clientId: "2owhnpxDQNtyKFgQK6R6pJLKDQXLnWhxfpL",
    // network: 'rinkeby or ropsten or kovan',
    network: 'rinkeby',
    signer: SimpleSigner("df31c81f998fff82bd2877f8146d9260bd0d99bf4d7821369692c165d5d58c96")
  })

  // Request credentials to login
  uport.requestCredentials({
    // requested: ['name', 'phone', 'country'],
    notifications: true // We want this if we want to recieve credentials
  }).then((credentials) => {
    // Do something
    console.log(credentials)
    logelem.innerHTML = JSON.stringify(credentials, null, "  ")
  })

// Attest specific credentials
// uport.attestCredentials({
//   sub: THE_RECEIVING_UPORT_ADDRESS,
//   claim: {
//     CREDENTIAL_NAME: CREDENTIAL_VALUE
//   },
//   exp: new Date().getTime() + 30 * 24 * 60 * 60 * 1000, // 30 days from now
// })

}
	<!doctype html>
	<html>
	<head>
	<title>uPort Sample App</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>
	<script src="https://unpkg.com/uport-connect/dist/uport-connect.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	main { padding: 10px 30px; }
	header { background: #EEE; }
	/* uPortが生成するデフォルト画面のwidthが400pxで固定されてるのでそれを解除するためのcss */
	div#uport-qr div {
	width: initial !important;
	min-width: 400px !important;
	}
	</style>
	</head>
	<body>
	<script language="javascript" src="sample.js"></script>
	<div class="container">
	<h1 id="appName">
	uPort Sample App hoge
	</h1>
	<button class="btn btn-sm btn-primary" id="connectUportBtn">Connect uPort</button>
	</div>
	<div class="container">
	<p id="userInformation"></p>
	</div>
	</body>
	</html>
	// import {Connect, SimpleSigner} from 'uport-connect'

	const Connect = window.uportconnect.Connect
	const SimpleSigner = window.uportconnect.SimpleSigner

	window.onload = function () {
	const btn = document.getElementById("connectUportBtn")
	console.log("btn=", btn)
	btn.addEventListener("click", (e) => uportConnect())
	}

	const uportConnect = function () {
	const logelem = document.getElementById("userInformation")
	const uport = new Connect('y_nakajo\'s sample app', {
	clientId: "2owhnpxDQNtyKFgQK6R6pJLKDQXLnWhxfpL",
	// network: 'rinkeby or ropsten or kovan',
	network: 'rinkeby',
	signer: SimpleSigner("df31c81f998fff82bd2877f8146d9260bd0d99bf4d7821369692c165d5d58c96")
	})

	// Request credentials to login
	uport.requestCredentials({
	// requested: ['name', 'phone', 'country'],
	notifications: true // We want this if we want to recieve credentials
	}).then((credentials) => {
	// Do something
	console.log(credentials)
	logelem.innerHTML = JSON.stringify(credentials, null, " ")
	})

	// Attest specific credentials
	// uport.attestCredentials({
	// sub: THE_RECEIVING_UPORT_ADDRESS,
	// claim: {
	// CREDENTIAL_NAME: CREDENTIAL_VALUE
	// },
	// exp: new Date().getTime() + 30 * 24 * 60 * 60 * 1000, // 30 days from now
	// })

	}